/* On Training — Digitação Profissional: mapa de prática, temas, vitrine. Complementa /cursos/pp.css e dg-teclado.css */
.dg-fingers, .dg-pad-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: .5rem; margin: 1rem 0 1.2rem; }
.dg-fingers span, .dg-pad-legend span { border-radius: 12px; padding: .6rem .7rem; font-size: .82rem; line-height: 1.35; color: #10243a; background: color-mix(in srgb, var(--fc, #ddd) 38%, #fff); border: 1px solid color-mix(in srgb, var(--fc, #ccc) 80%, #000 6%); border-bottom-width: 4px; }
.dg-fingers b, .dg-pad-legend b { display: block; margin-top: .25rem; font: 700 .95rem/1.3 'Cascadia Mono', Consolas, monospace; letter-spacing: .06em; }
.dg-fingers .f0, .dg-pad-legend .f0 { --fc: #f9a8d4; } .dg-fingers .f1, .dg-pad-legend .f1 { --fc: #fdba74; } .dg-fingers .f2, .dg-pad-legend .f2 { --fc: #fde047; }
.dg-fingers .f3, .dg-pad-legend .f3 { --fc: #86efac; } .dg-fingers .f4, .dg-pad-legend .f4 { --fc: #cbd5e1; } .dg-fingers .f5, .dg-pad-legend .f5 { --fc: #67e8f9; }
.dg-fingers .f6, .dg-pad-legend .f6 { --fc: #a5b4fc; } .dg-fingers .f7, .dg-pad-legend .f7 { --fc: #c4b5fd; } .dg-fingers .f8, .dg-pad-legend .f8 { --fc: #f0abfc; }

/* seletor de temas */
.dg-themes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.dg-theme { display: flex; gap: .7rem; align-items: flex-start; text-align: left; border: 2px solid #dbe5ee; background: #fff; border-radius: 18px; padding: .9rem 1rem; cursor: pointer; font: inherit; color: #10243a; transition: transform .15s, border-color .15s, box-shadow .15s; }
.dg-theme:hover { transform: translateY(-2px); border-color: #9fb5c9; }
.dg-theme.is-on { border-color: var(--tc, #00aa91); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tc, #00aa91) 25%, transparent); }
.dg-theme-ic { font-size: 1.7rem; line-height: 1; width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--tc, #00aa91) 14%, #fff); flex: none; }
.dg-theme b { display: block; font-size: 1rem; }
.dg-theme small { display: block; color: #52667a; font-size: .8rem; line-height: 1.35; margin-top: .15rem; }
.dg-theme-kids { --tc: #7c3aed; } .dg-theme-gamer { --tc: #0891b2; } .dg-theme-pro { --tc: #00aa91; } .dg-theme-calm { --tc: #1d4ed8; }
.dg-theme-gamer.is-on { background: #0b1124; color: #e6f1ff; } .dg-theme-gamer.is-on small { color: #9fb3d9; } .dg-theme-gamer.is-on .dg-theme-ic { background: #16224a; }
.dg-theme-kids.is-on { background: #fff8ec; } .dg-theme-calm.is-on { background: #fffdf6; }
.dg-themes.is-big .dg-theme { flex-direction: column; padding: 1.2rem; }
.dg-themes.is-big .dg-theme-ic { width: 3.4rem; height: 3.4rem; font-size: 2.1rem; }
.dg-themes.is-big .dg-theme b { font-size: 1.15rem; }
.dg-themes.is-big .dg-theme small { font-size: .9rem; }
.dg-themes.is-compact .dg-theme { padding: .65rem .75rem; }
@media (max-width: 900px) { .dg-themes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .dg-themes.is-compact { grid-template-columns: 1fr; } .dg-themes.is-compact small { display: none; } }

/* mapa de prática */
.dgmap { --ma: #00aa91; --mb: #f4b400; }
.dgmap[data-theme="kids"] { --ma: #7c3aed; --mb: #f59e0b; } .dgmap[data-theme="gamer"] { --ma: #0891b2; --mb: #c026d3; } .dgmap[data-theme="calm"] { --ma: #1d4ed8; --mb: #15803d; }
.dgm-head { display: flex; justify-content: space-between; gap: 1.2rem; align-items: flex-end; flex-wrap: wrap; margin: 1.2rem 0 1rem; }
.dgm-head h2 { margin: .2rem 0 .3rem; font-size: 1.35rem; }
.dgm-sub { margin: 0; color: #52667a; max-width: 560px; }
.dgm-kpis { display: flex; gap: .5rem; flex-wrap: wrap; }
.dgm-kpis div, .dg-me div { background: #f4f7fa; border: 1px solid #dbe5ee; border-radius: 14px; padding: .55rem .8rem; min-width: 92px; text-align: center; }
.dgm-kpis b, .dg-me b { display: block; font-size: 1.3rem; color: #10243a; }
.dgm-kpis b small, .dg-me b small { font-size: .8rem; color: #7a8da0; font-weight: 600; }
.dgm-kpis span, .dg-me span { font-size: .75rem; color: #52667a; }
.dgm-prog { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .9rem; font-size: .9rem; color: #52667a; }
.dgm-prog > span { display: inline-flex; align-items: center; gap: .3rem; }
.dgm-ok { color: #0f766e; font-weight: 700; }
.dgm-bar { position: relative; flex: 1 1 240px; height: 12px; border-radius: 99px; background: #e2ebf3; }
.dgm-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--ma), var(--mb)); transition: width .3s; }
.dgm-bar em { position: absolute; top: -4px; width: 3px; height: 20px; background: #10243a; border-radius: 2px; }
.dgm-tdet { border: 1px solid #dbe5ee; border-radius: 14px; padding: .55rem .85rem; margin-bottom: 1rem; background: #fbfdff; }
.dgm-tdet summary { cursor: pointer; display: flex; align-items: center; gap: .4rem; font-size: .92rem; list-style: none; }
.dgm-tdet summary::-webkit-details-marker { display: none; }
.dgm-tdet summary small { color: var(--ma); font-weight: 700; margin-left: .3rem; text-decoration: underline; }
.dgm-tdet[open] summary { margin-bottom: .7rem; }
.dgm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .7rem; }
.dgm-card { position: relative; display: flex; flex-direction: column; gap: .35rem; text-align: left; font: inherit; color: #10243a; background: #fff; border: 1.5px solid #dbe5ee; border-radius: 16px; padding: .8rem .85rem .7rem; cursor: pointer; min-height: 132px; transition: transform .15s, border-color .15s, box-shadow .15s; }
.dgm-card:hover, .dgm-card:focus-visible { transform: translateY(-2px); border-color: var(--ma); box-shadow: 0 10px 22px -16px rgba(16, 36, 58, .5); outline: none; }
.dgm-card.is-done { background: color-mix(in srgb, var(--ma) 6%, #fff); border-color: color-mix(in srgb, var(--ma) 45%, #dbe5ee); }
.dgm-card.is-next { border-color: var(--mb); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mb) 30%, transparent); }
.dgm-card.is-final { background: linear-gradient(160deg, #fff8e1, #fff); border-color: #f4b400; }
.dgm-n { font: 800 .78rem/1 'Cascadia Mono', Consolas, monospace; color: #7a8da0; }
.dgm-kind { display: inline-flex; align-items: center; gap: .25rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ma); }
.dgm-kind .ms { font-size: 1rem; }
.dgm-t { font-size: .93rem; line-height: 1.3; flex: 1; }
.dgm-foot { display: flex; justify-content: space-between; align-items: center; gap: .4rem; }
.dgm-foot small { font-size: .74rem; color: #52667a; }
.dgm-stars i { font-style: normal; color: #d3dde7; font-size: 1.05rem; letter-spacing: -1px; }
.dgm-stars i.on { color: #f4b400; }
.dgm-badge { position: absolute; top: .6rem; right: .6rem; font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; background: var(--mb); color: #111; border-radius: 99px; padding: .15rem .5rem; }
.dgm-badge.is-gold { background: #f4b400; }
.dgm-card.is-next.is-final .dgm-badge:not(.is-gold) { top: 2rem; }
.dg-labhost .dgt { margin-top: 1rem; }

/* bloqueio da avaliação */
.dg-gate { display: flex; gap: .8rem; align-items: flex-start; background: #fff7e6; border: 1px solid #f4cf7a; border-radius: 14px; padding: 1rem 1.1rem; margin: 1rem 0; }
.dg-gate > .ms { color: #8a4b00; font-size: 1.6rem; }
.dg-gate b { display: block; margin-bottom: .3rem; }
.dg-gate ul { margin: 0 0 .8rem 1.1rem; padding: 0; }
.dg-gate li { margin: .2rem 0; }
.dg-side-time { display: flex; align-items: center; gap: .3rem; margin: .7rem 0 0; font-size: .85rem; }
.dg-side-time .ms { font-size: 1.1rem; color: #00aa91; }

/* vitrine */
.dg-demo { min-height: 240px; }
.dg-demo-go { width: 100%; min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; border: 2px dashed #9fd9cc; border-radius: 22px; background: linear-gradient(160deg, #f0fffb, #fff); cursor: pointer; font: inherit; color: #10243a; transition: transform .15s, border-color .15s; }
.dg-demo-go:hover { transform: translateY(-2px); border-color: #00aa91; }
.dg-demo-go .ms { font-size: 3rem; color: #00aa91; }
.dg-demo-go b { font-size: 1.35rem; }
.dg-demo-go small { color: #52667a; }
.dg-demo-cta { margin-top: 1rem; padding: .9rem 1rem; border-radius: 14px; background: #fff7e0; color: #10243a; display: flex; gap: .8rem; align-items: center; justify-content: space-between; flex-wrap: wrap; text-align: left; }
.dg-demo-cta p { margin: 0; }
.dg-me { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; }
.dg-me[hidden] { display: none; }

/* arte do topo da vitrine */
.dg-hero-art { background: #fff; border-radius: 26px; padding: 1.3rem 1.3rem 1.1rem; box-shadow: 0 30px 60px -30px rgba(16, 36, 58, .45); border: 1px solid #dbe5ee; max-width: 470px; margin: 0 auto; }
.dg-ha-top { display: flex; gap: .5rem; margin-bottom: .9rem; }
.dg-ha-top span { flex: 1; background: #f4f7fa; border-radius: 12px; padding: .45rem .6rem; text-align: center; }
.dg-ha-top i { display: block; font-style: normal; font-size: .7rem; color: #5b6f83; text-transform: uppercase; letter-spacing: .05em; }
.dg-ha-top b { font-size: 1.25rem; color: #10243a; }
.dg-ha-text { font: 600 1.05rem/1.6 'Cascadia Mono', Consolas, monospace; color: #8aa0b4; margin: 0 0 1rem; padding: .8rem .9rem; background: #fbfdff; border: 1px solid #e2ebf3; border-radius: 14px; }
.dg-ha-text .ok { color: #0f766e; }
.dg-ha-text .cur { background: #f4b400; color: #111; border-radius: 3px; box-shadow: 0 3px 0 #008b76; animation: dgBlink 1.1s steps(2) infinite; }
@keyframes dgBlink { 50% { background: #ffe07a; } }
.dg-ha-kb { display: grid; gap: 5px; }
.dg-ha-kb div { display: flex; gap: 5px; justify-content: center; }
.dg-ha-kb div:nth-child(2) { padding-left: 14px; } .dg-ha-kb div:nth-child(3) { padding-left: 34px; }
.dg-ha-kb i { font-style: normal; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; background: #fff; border: 1px solid #c9d6e2; box-shadow: inset 0 -3px 0 #dbe5ee; font: 700 .8rem Inter, sans-serif; color: #10243a; }
.dg-ha-kb i.is-home { background: #e6fff8; border-color: #00aa91; box-shadow: inset 0 -3px 0 #00cca3; }
.dg-ha-kb i.is-space { width: 210px; }
@media (max-width: 520px) { .dg-ha-kb i { width: 24px; height: 28px; font-size: .7rem; } .dg-ha-kb i.is-space { width: 150px; } }
.pp-hero .dg-hero-art ~ .pp-f3 { top: auto; bottom: -16px; right: 24px; }