/* Por Dentro — tokens de marca, iguais ao site principal (ingrydlts.github.io) */ :root{ --off-white:#F4F1EC; --off-white-soft:#FBFAF7; --grafite:#2B2B2B; --verde-moss:#577328; --beje-paris:#DEB975; --beje-paris-text:#B8933F; --downtown-brown:#604034; --texto-secundario:#6E6862; --borda:rgba(43,43,43,.14); --borda-suave:rgba(43,43,43,.10); --font-display:'Fraunces', Georgia, serif; --font-body:'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --radius-sm:4px; --radius-md:8px; --radius-pill:999px; --shadow-soft: 0 1px 2px rgba(43,30,20,.05), 0 8px 24px rgba(43,30,20,.05); } *{box-sizing:border-box;} html,body{height:100%;} body{ margin:0; background:var(--off-white); color:var(--grafite); font-family:var(--font-body); } h1,h2,h3{font-family:var(--font-display); font-weight:700; margin:0 0 .5em; color:var(--grafite);} a{color:var(--downtown-brown); text-decoration:none;} a:hover{color:var(--grafite);} .muted{color:var(--texto-secundario);} /* ---------------------------------- layout shell ---------------------- */ .topbar{ display:flex; align-items:center; justify-content:space-between; padding:18px 40px; border-bottom:1px solid var(--borda-suave); background:var(--off-white); } .topbar .brand{font-family:var(--font-display); font-weight:700; font-size:19px; color:var(--grafite);} .topbar .brand span{color:var(--downtown-brown);} .topbar nav{display:flex; align-items:center; gap:22px;} .topbar nav a{font-size:13px; font-weight:600; color:var(--texto-secundario);} .page{max-width:1120px; margin:0 auto; padding:0 40px;} @media (max-width:640px){ .page{padding:0 20px;} } /* ---------------------------------- buttons ---------------------------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--font-body); font-weight:600; font-size:14px; padding:12px 22px; border-radius:var(--radius-sm); border:none; cursor:pointer; color:#fff; background:var(--grafite); text-align:center; } .btn:hover{filter:brightness(1.08); color:#fff;} .btn[disabled]{background:#A8AF9E; color:var(--off-white); opacity:.6; cursor:not-allowed;} .btn-outline{background:transparent; border:1px solid var(--downtown-brown); color:var(--downtown-brown);} .btn-outline:hover{color:var(--grafite); border-color:var(--grafite);} .btn-block{width:100%;} /* ---------------------------------- cards ------------------------------ */ .card{ background:#fff; border:1px solid var(--borda); border-radius:var(--radius-md); padding:24px; box-shadow:var(--shadow-soft); } .pill{ display:inline-flex; align-items:center; gap:7px; background:#fff; border:1px solid var(--borda); border-radius:var(--radius-pill); padding:7px 14px; font-size:12.5px; font-weight:600; color:var(--downtown-brown); } /* ---------------------------------- forms ------------------------------ */ input[type="text"], input[type="email"], input[type="date"]{ width:100%; border:1px solid var(--borda); background:var(--off-white-soft); color:var(--grafite); border-radius:10px; padding:12px 14px; font-size:14px; font-family:inherit; outline:none; } input[type="text"]:focus, input[type="email"]:focus, input[type="date"]:focus{border-color:var(--downtown-brown);} /* ---------------------------------- chat (onboarding) ------------------ */ .chat{display:flex; flex-direction:column; gap:10px; padding:16px 0;} .row{display:flex; width:100%;} .row.bot{justify-content:flex-start;} .row.user{justify-content:flex-end;} .bubble{ max-width:80%; padding:10px 14px; border-radius:16px; font-size:14px; line-height:1.5; white-space:pre-line; } .row.bot .bubble{background:var(--off-white-soft); color:var(--grafite); border:1px solid var(--borda-suave); border-bottom-left-radius:5px;} .row.user .bubble{background:var(--downtown-brown); color:#fff; border-bottom-right-radius:5px;} .options{display:flex; flex-direction:column; gap:8px; padding:2px 4px 4px;} .opt-btn{ text-align:left; padding:11px 14px; border-radius:12px; border:1px solid var(--borda); background:#fff; color:var(--grafite); font-family:inherit; font-size:13.5px; cursor:pointer; transition:border-color .15s, background .15s; } .opt-btn:hover{border-color:var(--downtown-brown); background:var(--off-white-soft);} form.inputbar{display:flex; gap:8px; padding:10px 4px;} form.inputbar input{flex:1;} form.inputbar button{ width:40px; height:40px; border-radius:50%; border:none; background:var(--grafite); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; flex:0 0 auto; font-size:16px; } form.inputbar.hidden{display:none;} /* ---------------------------------- checklist (dashboard) -------------- */ /* Cada linha é um grid de colunas FIXAS (tag · checkbox · título · prazo · seta). É isso que põe todas as pílulas de prazo na mesma coluna e com o mesmo tamanho, em vez de cada uma ocupar o espaço que o texto dela pede — e que deixa o título respirar em vez de ser espremido contra uma pílula gigante. */ .checklist-card{background:var(--grafite); border-radius:var(--radius-md); padding:26px 0 6px; box-shadow:var(--shadow-soft);} .checklist-head{display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:0 28px; margin-bottom:12px;} .checklist-head .title{font-family:var(--font-display); font-weight:700; font-size:19px; color:#fff;} .checklist-head .count{font-size:13px; color:var(--beje-paris); font-weight:700; white-space:nowrap;} .progress-track{height:8px; background:rgba(244,241,236,.12); border-radius:4px; overflow:hidden; margin:0 28px 18px;} .progress-fill{height:100%; background:var(--beje-paris); border-radius:4px; transition:width .4s ease;} .check-item{ display:grid; grid-template-columns:96px 20px minmax(0,1fr) 156px 14px; column-gap:16px; align-items:start; padding:17px 28px; border-top:1px solid rgba(244,241,236,.07); cursor:pointer; transition:background .12s; } .check-item:hover{background:rgba(244,241,236,.05);} .item-tag{padding-top:3px; font-size:11px; font-weight:700; letter-spacing:.01em; color:rgba(244,241,236,.42); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .item-main{min-width:0;} .check-item .label{font-size:14.5px; line-height:1.45; color:rgba(244,241,236,.94);} .item-sub{margin-top:5px; font-size:12.5px; line-height:1.5; color:rgba(244,241,236,.55);} .item-sub-urgente{color:#E8A08F;} .check-item .due{ display:block; width:100%; height:26px; line-height:26px; margin-top:-2px; padding:0 8px; text-align:center; font-size:11.5px; font-weight:700; border-radius:999px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; background:rgba(222,185,117,.14); color:var(--beje-paris); } .check-item .due.due-soft{background:rgba(244,241,236,.08); color:rgba(244,241,236,.6); font-weight:600;} .check-item .due.due-atrasado{background:rgba(196,90,66,.18); color:#E8A08F;} .check-item .chevron{color:rgba(244,241,236,.3); font-size:18px; line-height:1.2; text-align:right;} .check-item.done .label{color:rgba(244,241,236,.5); text-decoration:line-through;} .check-item.done .item-sub{opacity:.6;} .checkbox-btn{background:none; border:none; padding:0; margin:1px 0 0; cursor:pointer; flex-shrink:0;} .checkbox{width:20px; height:20px; border-radius:5px; border:1.4px solid rgba(244,241,236,.35); display:flex; align-items:center; justify-content:center;} .check-item.done .checkbox{background:var(--verde-moss); border-color:var(--verde-moss);} .check-item.done .checkbox svg{display:block;} .checkbox svg{display:none;} /* Golden check: marco que desbloqueia outro item (ex.: aceite no mestrado) — destaque visual pra deixar claro que não é uma tarefa comum. */ .check-item-golden .checkbox{border-color:var(--beje-paris); border-width:2px;} .check-item-golden.done .checkbox{background:var(--beje-paris); border-color:var(--beje-paris);} .check-item-golden .label{color:var(--beje-paris);} /* Item em alerta (pré-requisito crítico pela resposta da pessoa — ver itemEmAlerta no dashboard): vermelho com ⚠️ no rótulo. */ .check-item-alerta .label{color:#F08A78; font-weight:600;} .check-item-alerta .checkbox{border-color:#F08A78; border-width:2px;} /* Confete de marco comemorado (ver soltarConfete no dashboard). */ .confete-wrap{position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:9999;} .confete{position:absolute; top:-14px; width:9px; height:14px; border-radius:2px; opacity:0; animation:confete-cai linear forwards;} @keyframes confete-cai{ 0%{opacity:1; translate:0 0;} 100%{opacity:1; translate:var(--deriva) 105vh; rotate:720deg;} } /* Item bloqueado até um golden check anterior ser concluído — sem ação possível, só leitura (a linha ainda abre o guia, que explica a ressalva). */ .check-item-locked{opacity:.55;} .check-item-locked .checkbox-btn{cursor:not-allowed;} /* ---------------------------------- alerta de inconsistência ----------- */ .alerta-incongruencia{border-left:4px solid #B8452F; margin-bottom:20px;} .alerta-head{display:flex; align-items:flex-start; gap:12px; margin-bottom:14px;} .alerta-icon{font-size:19px; line-height:1.3; flex-shrink:0;} .alerta-title{font-weight:700; font-size:14.5px; color:var(--grafite); margin-bottom:4px;} .alerta-msg{font-size:13.5px; line-height:1.55; color:var(--texto-secundario);} .alerta-body p{font-size:13px; line-height:1.55; color:var(--texto-secundario); margin:0 0 10px;} .alerta-body textarea{ width:100%; min-height:76px; border:1px solid var(--borda); background:var(--off-white-soft); color:var(--grafite); border-radius:10px; padding:12px 14px; font-size:13.5px; font-family:inherit; outline:none; resize:vertical; margin-bottom:12px; } .alerta-body textarea:focus{border-color:var(--downtown-brown);} .alerta-actions{display:flex; justify-content:flex-end;} .alerta-confirmacao{font-size:13.5px; line-height:1.55; color:var(--verde-moss); font-weight:600;} /* ---------------------------------- modal de guia do checklist ---------- */ .modal-backdrop{ display:none; position:fixed; inset:0; background:rgba(43,30,20,.45); z-index:100; align-items:center; justify-content:center; padding:20px; } .modal-panel{ background:#fff; border-radius:var(--radius-md); max-width:520px; width:100%; max-height:86vh; overflow-y:auto; padding:28px; box-shadow:0 20px 60px rgba(43,30,20,.25); position:relative; } .modal-close{ position:absolute; top:18px; right:18px; width:30px; height:30px; border-radius:50%; border:none; background:var(--off-white-soft); color:var(--grafite); font-size:16px; cursor:pointer; line-height:1; } .modal-close:hover{background:var(--off-white);} .modal-category{font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--beje-paris-text); margin-bottom:8px;} .modal-title{font-family:var(--font-display); font-weight:700; font-size:19px; margin-bottom:10px; padding-right:30px;} .modal-prazo{display:inline-flex; font-size:12px; font-weight:700; padding:5px 11px; border-radius:999px; background:#FBF1DE; color:var(--beje-paris-text); margin-bottom:16px;} .modal-para-que-serve{background:var(--off-white-soft); border-left:4px solid var(--verde-moss); border-radius:var(--radius-md); padding:12px 14px; font-size:13px; line-height:1.55; color:var(--grafite); margin-bottom:14px;} .modal-dropdown summary{cursor:pointer; font-weight:600; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:8px;} .modal-dropdown summary::-webkit-details-marker{display:none;} .modal-dropdown summary::after{content:"▾"; font-size:12px; color:var(--texto-secundario); transition:transform .15s ease;} .modal-dropdown[open] summary::after{transform:rotate(180deg);} .modal-dropdown-corpo{margin-top:8px;} .modal-tip{background:#FBF1DE; border-left:4px solid var(--beje-paris-text); border-radius:var(--radius-md); padding:12px 14px; font-size:13px; line-height:1.55; color:var(--grafite); margin-bottom:18px; white-space:pre-line;} .modal-copias-banner{background:rgba(96,64,52,.08); border-left:4px solid var(--downtown-brown); border-radius:var(--radius-md); padding:10px 14px; font-size:12.5px; font-weight:600; color:var(--downtown-brown); margin-bottom:12px;} .modal-envio-card{border:1px solid var(--borda-suave); border-radius:var(--radius-md); padding:12px 14px; margin-bottom:10px;} .modal-envio-finalidade{font-weight:700; font-size:13.5px; color:var(--grafite); margin-bottom:2px;} .modal-envio-destinatario{font-size:12.5px; color:var(--texto-secundario); margin-bottom:8px;} .modal-envio-actions{display:flex; align-items:center; gap:8px; flex-wrap:wrap;} .modal-envio-actions .guide-link{padding:6px 12px; font-size:12.5px;} .modal-envio-tag{font-size:11px; font-weight:700; padding:4px 9px; border-radius:999px; background:var(--off-white-soft); color:var(--texto-secundario); border:1px solid var(--borda-suave);} .modal-envio-obs{font-size:12px; color:var(--texto-secundario); margin-top:8px; font-style:italic;} .modal-envio-steps{margin:10px 0 0; padding-left:18px; display:flex; flex-direction:column; gap:4px;} .modal-envio-steps li{font-size:12.5px; line-height:1.5; color:var(--grafite);} .modal-procedure{background:var(--off-white-soft); border:1px solid var(--borda-suave); border-radius:var(--radius-md); padding:12px 14px; margin-bottom:18px;} .modal-procedure-label{font-size:12px; color:var(--texto-secundario);} .modal-procedure-label b{color:var(--grafite); font-weight:700;} .modal-procedure-next{ display:inline-flex; align-items:center; gap:6px; margin-top:8px; font-size:13px; font-weight:600; color:var(--downtown-brown); background:none; border:none; padding:0; cursor:pointer; text-align:left; font-family:inherit; } .modal-procedure-next:hover{color:var(--grafite); text-decoration:underline;} .modal-procedure-next:disabled{color:var(--texto-secundario); cursor:default; text-decoration:none;} .modal-section-title{font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--texto-secundario); margin-bottom:10px;} .modal-steps{margin:0 0 20px; padding-left:20px; display:flex; flex-direction:column; gap:8px;} .modal-steps li{font-size:13.5px; line-height:1.55; color:var(--grafite);} .modal-links{display:flex; flex-direction:column; gap:8px; margin-bottom:22px;} .guide-link{ display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--downtown-brown); border:1px solid var(--borda); border-radius:10px; padding:10px 14px; transition:border-color .15s, background .15s; } .guide-link:hover{border-color:var(--downtown-brown); background:var(--off-white-soft); color:var(--downtown-brown);} .guide-link::after{content:"↗"; margin-left:auto; font-size:12px;} .guide-link-logo{width:18px; height:18px; border-radius:4px; flex-shrink:0; object-fit:contain; background:#fff;} .modal-footer{display:flex; justify-content:flex-end; border-top:1px solid var(--borda-suave); padding-top:18px;} /* ---------------------------------- check-in e IAssistente (coluna lateral) */ .kicker{font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--texto-secundario);} .checklist-side{display:flex; flex-direction:column; gap:16px; position:sticky; top:20px; align-self:start;} .checkin-card{padding:20px 22px;} .checkin-card .kicker{margin-bottom:12px;} .checkin-pct{display:flex; align-items:baseline; gap:10px; margin-bottom:12px;} .checkin-pct .num{font-family:var(--font-display); font-weight:700; font-size:34px; color:var(--verde-moss);} .checkin-pct .label{font-size:13px; line-height:1.4; color:var(--texto-secundario);} .checkin-track{height:7px; background:var(--borda-suave); border-radius:4px; overflow:hidden; margin-bottom:20px;} .checkin-fill{height:100%; background:var(--verde-moss); border-radius:4px; transition:width .4s ease;} .checkin-next{border-top:1px solid var(--borda-suave); padding-top:16px;} .checkin-next .kicker{margin-bottom:8px;} .checkin-next .label-item{font-size:14.5px; font-weight:600; line-height:1.4; color:var(--grafite); margin-bottom:4px;} .checkin-next .prazo{font-size:13px; color:var(--beje-paris-text); font-weight:600;} .iassistente-card{background:#FBF1DE; border-color:rgba(184,147,63,.32); border-left:4px solid var(--beje-paris-text); padding:18px 22px;} .iassistente-card .kicker{color:var(--beje-paris-text); margin-bottom:14px;} .iassistente-nota{display:flex; gap:12px; align-items:flex-start; font-size:13.5px; line-height:1.65; color:var(--grafite);} .iassistente-nota-icone{flex-shrink:0; line-height:1.5;} /* ---------------------------------- sininho de notificações ------------ */ .bell-wrap{position:relative;} .bell-btn{ position:relative; background:none; border:none; cursor:pointer; font-size:17px; padding:4px; line-height:1; color:var(--grafite); } .bell-badge{ position:absolute; top:-4px; right:-6px; background:#B8452F; color:#fff; font-size:10px; font-weight:700; line-height:1; border-radius:999px; padding:3px 5px; min-width:15px; text-align:center; } .bell-dropdown{ position:absolute; top:calc(100% + 10px); right:0; width:300px; background:#fff; border:1px solid var(--borda); border-radius:var(--radius-md); box-shadow:0 12px 32px rgba(43,30,20,.15); padding:14px; z-index:50; } .bell-dropdown-title{font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--texto-secundario); margin-bottom:10px;} .bell-empty{font-size:13px; color:var(--texto-secundario); padding:6px 2px;} .bell-item{display:flex; align-items:center; gap:6px; border-radius:8px; margin-bottom:2px;} .bell-item:hover{background:var(--off-white-soft);} .bell-item-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; text-align:left; background:none; border:none; cursor:pointer; padding:8px 8px; font-family:inherit; } .bell-item-label{font-size:13px; font-weight:600; color:var(--grafite);} .bell-item-prazo{font-size:11.5px; color:var(--beje-paris-text); font-weight:600;} .bell-item-atrasado .bell-item-prazo{color:#B8452F;} .bell-item-dismiss{background:none; border:none; color:var(--texto-secundario); cursor:pointer; font-size:11px; padding:6px;} .bell-item-dismiss:hover{color:var(--grafite);} /* ---------------------------------- bloco de perfil --------------------- */ .avatar-badge{ width:46px; height:46px; border-radius:50%; background:var(--off-white-soft); border:1px solid var(--borda); display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; } .profile-banner-nome{font-weight:700; font-size:15px; color:var(--grafite); margin-bottom:3px;} .profile-banner-hint{font-size:13px; line-height:1.5;} /* ---------------------------------- página de artigos ------------------- */ .content-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:16px;} .content-card{ display:block; background:#fff; border:1px solid var(--borda); border-radius:var(--radius-md); padding:20px 22px; box-shadow:var(--shadow-soft); transition:border-color .15s; } .content-card:hover{border-color:var(--downtown-brown);} .content-card-logo{width:24px; height:24px; border-radius:5px; object-fit:contain; background:var(--off-white-soft); margin-bottom:12px;} .content-card-titulo{font-weight:700; font-size:15px; color:var(--grafite); margin-bottom:8px; line-height:1.4;} .content-card-resumo{font-size:13px; line-height:1.6; color:var(--texto-secundario);} /* ---------------------------------- escolha de caminho (overlay) -------- */ .path-overlay{ position:fixed; inset:0; background:rgba(43,30,20,.55); z-index:200; display:flex; align-items:center; justify-content:center; padding:24px; overflow-y:auto; } .path-overlay-panel{ background:#fff; border-radius:var(--radius-md); max-width:960px; width:100%; max-height:90vh; overflow-y:auto; padding:32px; box-shadow:0 20px 60px rgba(43,30,20,.3); } .path-overlay-title{font-family:var(--font-display); font-weight:700; font-size:22px; margin-bottom:8px;} .path-overlay-hint{font-size:13.5px; color:var(--texto-secundario); line-height:1.55; max-width:640px;} /* auto-fit, não repeat(3, 1fr) fixo — o card de Master some pra quem não tem graduação (ver filtro em dashboard/index.html), e 2 cards num grid de 3 colunas deixaria um buraco vazio. Com minmax, 2 ou 3 cards preenchem a linha do mesmo jeito. */ .path-cards{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:16px; margin-top:22px;} @media (max-width:760px){ .path-cards{grid-template-columns:1fr;} } .path-card{ display:flex; flex-direction:column; gap:10px; border:1px solid var(--borda); border-radius:var(--radius-md); padding:18px; } .path-card-risco{display:inline-flex; align-self:flex-start; font-size:11px; font-weight:700; padding:4px 10px; border-radius:999px;} .path-card-risco-baixo{background:rgba(87,115,40,.14); color:var(--verde-moss);} .path-card-risco-medio{background:#FBF1DE; color:var(--beje-paris-text);} .path-card-risco-alto{background:rgba(184,69,47,.14); color:#B8452F;} .path-card-titulo{font-family:var(--font-display); font-weight:700; font-size:16px; line-height:1.3;} .path-card-resumo{font-size:13px; line-height:1.55; color:var(--texto-secundario);} .path-card-riscos{margin:0; padding-left:18px; display:flex; flex-direction:column; gap:6px;} .path-card-riscos li{font-size:12px; line-height:1.5; color:var(--grafite);} .path-card-btn{margin-top:auto; width:100%;} /* ---------------------------------- prazos dinâmicos no checklist ------- */ /* A linha do tempo não é mais uma seção à parte — os prazos calculados a partir de hoje (ver assets/js/prazos.js) são aplicados direto no campo `quando` dos itens de checklist, reaproveitando o badge .due e o pill .modal-prazo que já existiam. */ .modal-prazo-urgente{background:rgba(184,69,47,.14); color:#B8452F;} .guide-link-futuro{ opacity:.6; cursor:default; border-style:dashed; } .guide-link-futuro:hover{border-color:var(--borda); background:none;} .guide-link-futuro::after{content:"";} /* ---------------------------------- percurso (/landing/) ---------------- */ /* A etapa entre o bot e o checklist. Diferente do onboarding, aqui não é chat: as respostas anteriores ficam todas visíveis e clicáveis, porque o valor dessa tela é a pessoa enxergar a lógica do próprio caso — e poder corrigir um ramo sem recomeçar. */ .percurso-page{max-width:680px; padding-top:40px; padding-bottom:72px;} .percurso-head{margin-bottom:28px;} .percurso-head h1{font-size:27px; line-height:1.25; margin:14px 0 10px;} .percurso-intro{font-size:14px; line-height:1.65; margin:0;} .percurso-progress{display:flex; align-items:center; gap:12px; margin-bottom:24px;} .percurso-progress-track{flex:1; height:4px; background:rgba(43,43,43,.10); border-radius:999px; overflow:hidden;} .percurso-progress-fill{height:100%; background:var(--verde-moss); border-radius:999px; transition:width .3s ease;} .percurso-progress-label{font-size:12px; font-weight:600; color:var(--texto-secundario); white-space:nowrap;} .percurso-resp{ display:flex; align-items:baseline; gap:10px; width:100%; text-align:left; background:transparent; border:none; border-left:2px solid var(--borda); padding:8px 0 8px 14px; margin-bottom:2px; cursor:pointer; font-family:inherit; } .percurso-resp:hover{border-left-color:var(--downtown-brown);} .percurso-resp-pergunta{flex:1; font-size:13px; color:var(--texto-secundario); line-height:1.45;} .percurso-resp-valor{font-size:13px; font-weight:600; color:var(--grafite);} .percurso-resp-editar{font-size:11.5px; font-weight:600; color:var(--downtown-brown); opacity:0; transition:opacity .15s ease;} .percurso-resp:hover .percurso-resp-editar{opacity:1;} .percurso-card{margin-top:18px; padding:28px;} .percurso-pergunta{font-family:var(--font-display); font-weight:700; font-size:20px; line-height:1.35;} .percurso-ajuda{font-size:13px; line-height:1.6; color:var(--texto-secundario); margin-top:10px;} .percurso-opcoes{display:flex; flex-direction:column; gap:10px; margin-top:20px;} .percurso-opcao{ display:flex; flex-direction:column; gap:5px; width:100%; text-align:left; background:var(--off-white-soft); border:1px solid var(--borda); border-radius:var(--radius-md); padding:14px 16px; cursor:pointer; font-family:inherit; } .percurso-opcao:hover{border-color:var(--downtown-brown); background:#fff;} .percurso-opcao-label{font-size:14.5px; font-weight:600; color:var(--grafite);} .percurso-opcao-nota{font-size:12.5px; line-height:1.5; color:var(--texto-secundario);} .percurso-mesano{display:flex; flex-direction:column; gap:12px; margin-top:20px; align-items:flex-start;} .percurso-mesano-linha{display:flex; gap:10px; width:100%;} .percurso-select{ flex:1; border:1px solid var(--borda); background:var(--off-white-soft); color:var(--grafite); border-radius:10px; padding:12px 14px; font-size:14px; font-family:inherit; outline:none; } .percurso-select:focus{border-color:var(--downtown-brown);} /* Aviso do fluxograma: aparece no momento da resposta, não só no checklist. */ .percurso-aviso{ display:flex; gap:12px; align-items:flex-start; margin-top:18px; background:#FBF1DE; border-left:4px solid var(--beje-paris-text); border-radius:var(--radius-md); padding:14px 16px; } .percurso-aviso-icone{font-size:15px; line-height:1.5;} .percurso-aviso-texto{font-size:13px; line-height:1.6; color:var(--grafite);} .percurso-final{margin-top:22px;} .percurso-final-card{border-color:var(--verde-moss);} .percurso-final-kicker{font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--verde-moss);} .percurso-final-titulo{font-family:var(--font-display); font-weight:700; font-size:19px; line-height:1.35; margin:8px 0 14px;} .percurso-final-linha{ font-size:13px; line-height:1.6; color:var(--grafite); padding:9px 0 9px 16px; border-left:2px solid var(--borda-suave); } .percurso-final-btn{margin-top:20px; width:100%;} .percurso-refazer{display:block; margin:14px auto 0; background:none; border:none; padding:0; cursor:pointer; font:inherit; font-size:13px; color:var(--texto-secundario); text-decoration:underline;} .percurso-refazer:hover{color:var(--grafite);} /* ---------------------------------- leitura de timing ------------------- */ /* Fica acima do checklist de propósito: a pergunta "isso cabe no tempo que eu tenho?" vem antes de qualquer tarefa. A cor da borda carrega o veredito, e a lista de marcos deixa a conta aberta — sem ela o veredito seria só opinião. */ .timing-card{margin-bottom:16px; border-left-width:4px; border-left-style:solid;} .timing-ok{border-left-color:var(--verde-moss);} .timing-apertado{border-left-color:var(--beje-paris-text);} .timing-nao_cabe{border-left-color:#B8452F;} .timing-incompleto{border-left-color:var(--borda);} .timing-kicker{font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--texto-secundario);} .timing-titulo{font-family:var(--font-display); font-weight:700; font-size:18px; line-height:1.35; margin:8px 0 10px;} .timing-corpo{font-size:13.5px; line-height:1.65; color:var(--grafite);} /* Leitura de timing em dropdown: kicker + título do veredito sempre à vista. */ .timing-dropdown summary{cursor:pointer; list-style:none; position:relative; padding-right:26px;} .timing-dropdown summary::-webkit-details-marker{display:none;} .timing-dropdown summary .timing-kicker,.timing-dropdown summary .timing-titulo{display:block;} .timing-dropdown summary .timing-titulo{margin-bottom:0;} .timing-dropdown[open] summary .timing-titulo{margin-bottom:10px;} .timing-dropdown summary::after{content:"▾"; position:absolute; right:0; top:1px; font-size:14px; color:var(--texto-secundario); transition:transform .15s ease;} .timing-dropdown[open] summary::after{transform:rotate(180deg);} .timing-btn{margin-top:16px;} .timing-marcos{margin-top:18px; border-top:1px solid var(--borda-suave); padding-top:6px;} .timing-marco{display:flex; gap:14px; align-items:baseline; padding:7px 0; font-size:13px;} .timing-marco + .timing-marco{border-top:1px solid var(--borda-suave);} .timing-marco-data{flex:0 0 132px; font-weight:600; color:var(--texto-secundario); font-variant-numeric:tabular-nums;} .timing-marco-label{flex:1; line-height:1.45;} .timing-marco-limite .timing-marco-data, .timing-marco-limite .timing-marco-label{color:#B8452F; font-weight:600;} .timing-saida{ margin-top:18px; background:rgba(87,115,40,.08); border-radius:var(--radius-md); padding:16px 18px; } .timing-saida-titulo{font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--verde-moss); margin-bottom:8px;} .timing-saida-corpo{font-size:13px; line-height:1.65; color:var(--grafite);} @media (max-width:640px){ .timing-marco{flex-direction:column; gap:2px;} .timing-marco-data{flex:none;} } .refazer-percurso{ display:inline-block; margin-left:12px; font-size:12.5px; font-weight:600; color:var(--texto-secundario); text-decoration:underline; text-underline-offset:3px; /* Reset de