/* Plano de Carreira 3.0 · o documento que se preenche (mesma família da arte "Plano de Carreira 3.0") */
.ap-doc {
  --fw: Calibri, Carlito, "Segoe UI", system-ui, sans-serif;
  --paper: #FFFDF8;
  --paper-2: #F4ECDA;
  --paper-line: #E2D5B8;
  --ink: #111111;
  --ink-2: #3A2A18;
  --ink-3: #5A4326;
  --ink-4: #8A7A62;
  --blank: #E6E1D6;
  --word: #185ABD;
  --ok: #007A5A;
  --x: #D9382C;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 7px 7px 0 #E9E3D6, 14px 14px 0 #C9C1B0, 0 30px 60px #000000B3;
  font-family: var(--fw);
  text-align: left;
}
.ap-doc * { box-sizing: border-box; }
.ap-doc h2, .ap-doc h3, .ap-doc p, .ap-doc ul, .ap-doc ol, .ap-doc dl, .ap-doc dd { margin: 0; padding: 0; }
.ap-doc ul, .ap-doc ol { list-style: none; }

.ap-bar { display: flex; align-items: center; gap: 9px; padding: 9px 14px; background: var(--word); color: #fff; font: 500 13px/16px var(--fw); }
.ap-bar i { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex-shrink: 0; border-radius: 4px; background: #fff; color: var(--word); font: 800 12px/1 var(--fw); font-style: normal; }
.ap-bar span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-pct { font: 500 12px/14px var(--fw); padding: 2px 7px; border-radius: 99px; background: #FFFFFF26; }

.ap-page { display: flex; flex-direction: column; gap: 22px; padding: 20px 22px 26px; }
.ap-head { display: flex; flex-direction: column; gap: 6px; }
.ap-head small { font: 400 12px/12px var(--fw); color: var(--ok); }
.ap-title { font: 700 27px/30px var(--fw); color: var(--ink); overflow-wrap: anywhere; }
.ap-route { font: 400 18px/24px var(--fw); color: var(--ink-3); }
.ap-ph { color: #B9AE98; }
.ap-chips { padding-top: 4px; font: 400 12px/14px var(--fw); color: var(--ink-4); }

.ap-sec { display: flex; flex-direction: column; gap: 10px; }
.ap-sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 6px; border-bottom: 1px solid #EDE6D6; }
.ap-sec-t { font: 700 15px/19px var(--fw); color: var(--ink); }
.ap-sec-r { font: 400 12px/12px var(--fw); color: var(--ink-4); white-space: nowrap; }

/* linhas em branco do documento */
.ap-blank { display: flex; flex-direction: column; gap: 8px; padding: 2px 0; }
.ap-blank span { display: block; height: 5px; border-radius: 3px; background: var(--blank); }
.ap-wait { padding-top: 2px; font: 400 12px/12px var(--fw); color: #B3A88F; }

/* mapa */
.ap-sec-map { gap: 8px; }
.ap-map { display: block; width: 100%; height: auto; }
.ap-map-lab { font: 400 12px var(--fw); fill: #3A2A18; fill-opacity: .6; }
.ap-map-q { font: 700 24px var(--fw); fill: #3A2A18; fill-opacity: .25; }
.ap-reveal { stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.ap-stop, .ap-x { transform-box: fill-box; transform-origin: center; }
.ap-steps { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 6px; padding: 0 2px; font: 500 12px/12px var(--fw); color: var(--ink-3); }
.ap-steps span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-steps span:not(:first-child) { text-align: center; }
.ap-steps span:last-child { text-align: right; }
.ap-steps .is-goal { color: var(--x); }

/* tarefas */
.ap-tasks { display: flex; flex-direction: column; }
.ap-tasks li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid #F1EBDD; font: 400 15px/20px var(--fw); color: #2B2620; }
.ap-tasks li:last-child { border-bottom: 0; }
.ap-check { width: 14px; height: 14px; margin-top: 2px; flex-shrink: 0; border-radius: 3px; border: 1.5px solid #BDBDBD; }
.ap-check { display: flex; align-items: center; justify-content: center; transition: background-color .25s ease, border-color .25s ease; }
.ap-tasks li.is-done .ap-check { background: var(--ok); border-color: var(--ok); }
@media (prefers-reduced-motion: no-preference) { .ap-tasks li.just-done .ap-check svg { animation: ap-pop .3s ease both; } }

/* fases */
.ap-phases { display: flex; flex-direction: column; gap: 8px; }
.ap-phases li { display: grid; grid-template-columns: 92px 1fr; column-gap: 12px; row-gap: 2px; padding: 10px 12px; border-radius: 8px; border: 1px solid #EDE6D6; }
.ap-phases li.is-now { background: var(--paper-2); border-color: var(--paper-line); }
.ap-ph-when { grid-row: span 2; font: 500 12px/16px var(--fw); color: var(--ink-4); }
.ap-phases .is-now .ap-ph-when { color: var(--ok); }
.ap-now { display: block; font-style: normal; color: var(--ok); }
.ap-ph-t { font: 600 15px/19px var(--fw); color: var(--ink); }
.ap-ph-d { font: 400 14px/19px var(--fw); color: #6B604F; }

/* rotina */
.ap-chart { display: flex; align-items: flex-end; gap: 8px; height: 96px; }
.ap-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.ap-col span { font: 500 12px/12px var(--fw); color: var(--ink-3); }
.ap-col i { display: block; width: 100%; border-radius: 4px 4px 2px 2px; background: var(--word); }
.ap-col.zero span { color: #B9AE98; }
.ap-col.zero i { background: var(--blank); }
.ap-col.peak i { background: #0F3F8C; }
.ap-col em { font: 400 12px/12px var(--fw); font-style: normal; color: var(--ink-4); }

/* competências */
.ap-leg { display: inline-flex; align-items: center; gap: 5px; }
.ap-leg i, .ap-dots i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--blank); }
.ap-leg i { margin-left: 6px; }
.ap-leg i.n, .ap-dots i.n { background: var(--ink-2); }
.ap-leg i.g, .ap-dots i.g { background: none; border: 1.5px solid var(--ok); }
.ap-skills { display: flex; flex-direction: column; }
.ap-skills li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid #F1EBDD; font: 400 15px/20px var(--fw); color: #2B2620; }
.ap-skills li:last-child { border-bottom: 0; }
.ap-dots { display: flex; gap: 4px; flex-shrink: 0; }

/* como estudar */
.ap-kv { display: flex; flex-direction: column; gap: 8px; }
.ap-kv div { display: grid; grid-template-columns: 120px 1fr; gap: 12px; }
.ap-kv dt { font: 400 14px/19px var(--fw); color: var(--ink-4); }
.ap-kv dd { font: 500 15px/20px var(--fw); color: #2B2620; overflow-wrap: anywhere; }

/* compacto (landing) */
.ap-doc.is-compact .ap-page { gap: 16px; padding: 18px 20px 22px; }
.ap-doc.is-compact .ap-title { font-size: 24px; line-height: 26px; }
.ap-doc.is-compact .ap-tasks li { font-size: 13px; line-height: 17px; padding: 7px 0; }

/* animação: o que acabou de ser preenchido */
@media (prefers-reduced-motion: no-preference) {
  .ap-sec.just-lit:not(.ap-sec-map) > :not(.ap-sec-h) { animation: ap-ink .55s cubic-bezier(.2, .7, .2, 1) both; }
  .ap-sec.just-lit .ap-sec-h { animation: ap-flash 1.2s ease both; }
  .just-lit .ap-reveal { animation: ap-draw 1.1s cubic-bezier(.65, 0, .35, 1) both; }
  .just-lit .ap-stop { animation: ap-pop .3s ease both; animation-delay: calc(.25s + var(--i) * .25s); }
  .just-lit .ap-x { animation: ap-pop .35s ease both; animation-delay: 1s; transform-box: fill-box; transform-origin: center; }
}
@keyframes ap-ink { from { opacity: 0; transform: translateY(4px); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes ap-flash { 0% { background: #F4ECDA; } 100% { background: transparent; } }
@keyframes ap-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ap-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }