/* Peças que aproximam as interfaces simuladas dos apps reais:
   Painel Geral e Ficha do cliente (Capital), editor e Conferência final (Docs). */

/* ---------- Rodapé da lateral (tema e status, como nos apps) ---------- */
.app__side-foot { display: grid; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--a-line); }
.act--block { width: 100%; justify-content: flex-start; }
.act svg, .prio svg, .conf svg, .cpf-tag svg, .cap-search svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.app__status { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; border: 1px solid var(--a-line); background: var(--a-card); }
.app__status b { display: block; font: 600 13px var(--font-ui); }
.app__status small { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--a-faint); }
.app__status small i { width: 7px; height: 7px; border-radius: 50%; background: var(--st-ok); }
.app__avatar { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--a-line); font: 600 13px var(--font-ui); color: var(--a-accent); }

/* ---------- DSR Capital: Painel Geral ---------- */
.app--capital { --cap-gold: #c9a66b; --cap-gold-2: #dcbd88; }
.act--gold { background: var(--cap-gold); border-color: var(--cap-gold); color: #1b150a; font-weight: 600; }
.act--gold:hover { background: var(--cap-gold-2); }
.count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--cap-gold); color: #1b150a; font: 600 11px var(--font-ui); }
.count--box { height: auto; padding: 4px 10px; border-radius: 8px; background: transparent; border: 1px solid var(--a-line); color: var(--a-muted); font-weight: 500; }
.muted { color: var(--a-faint); font-size: 12px; }
.cap-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin: -2px 0 18px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--a-line); background: var(--a-card); }
.cap-top .v-h { margin: 0; font-size: 22px; }
.cap-top__sub { margin: 2px 0 0; font-size: 12px; color: var(--a-faint); }
.cap-top__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cap-search { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--a-line); background: var(--a-bg); color: var(--a-faint); }
.cap-search input { min-height: 44px; width: 220px; border: 0; background: transparent; color: var(--a-text); font-size: 13px; outline: none; }
.cap-search:focus-within { border-color: var(--a-accent); }
.cap-search:has(input:focus-visible) { outline: 2px solid var(--a-accent); outline-offset: 2px; }
.app input::placeholder { color: var(--a-faint); opacity: 1; }
.app__addr { min-width: 0; }
.app__addr > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cap-search kbd { padding: 2px 6px; border-radius: 5px; border: 1px solid var(--a-line); font: 500 10px var(--font-ui); color: var(--a-faint); }
.cap-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 14px; align-items: start; }
.cap-main { display: grid; gap: 14px; min-width: 0; }
.cap-main > .v-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cap-aside { display: grid; gap: 14px; }
.cap-h { margin: 6px 0 0; font: 600 16px var(--font-ui); }
.kpi--icon { position: relative; }
.kpi--icon > small { padding-right: 38px; }
.kpi__ico { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; }
.kpi__ico svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.kpi__ico--gold { background: rgba(201, 166, 107, 0.16); color: var(--cap-gold); }
.kpi__ico--ok { background: rgba(79, 191, 152, 0.14); color: var(--st-ok); }
.kpi__ico--late { background: rgba(226, 115, 95, 0.14); color: var(--st-late); }
.bars i.gold { background: var(--cap-gold); }
.bars i.dim { background: rgba(180, 230, 210, 0.14); }
.bars i.warn { background: var(--st-warn); }
.flow-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 7rem), 1fr)); gap: 6px 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--a-line); font-size: 12px; color: var(--a-faint); }
.flow-grid > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 8px; }
.flow-grid b { font-weight: 600; color: var(--a-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dist { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 16px; }
.donut { position: relative; }
.donut span { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; font-size: 11px; color: var(--a-faint); }
.donut span b { font: 600 24px var(--font-ui); color: var(--a-text); }
.legend { min-width: 170px; }
.legend b { margin-left: auto; padding-left: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.legend b small { font-weight: 400; color: var(--a-faint); }
.legend--row { grid-auto-flow: column; justify-content: start; gap: 16px; margin-top: 10px; min-width: 0; }
.list--flush { border: 0; border-radius: 0; border-top: 1px solid var(--a-line); }
.follow__act { opacity: .85; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font: 600 11px var(--font-ui); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill--ok { color: var(--st-ok); background: rgba(79, 191, 152, 0.12); }
.pill--warn { color: var(--st-warn); background: rgba(224, 178, 90, 0.13); }
.pill--late { color: var(--st-late); background: rgba(226, 115, 95, 0.14); }
.prio { display: grid; gap: 8px; margin-top: 12px; }
.prio__item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--a-line); background: rgba(255, 255, 255, 0.02); color: var(--a-text); text-align: left; font: inherit; cursor: pointer; transition: border-color .2s, background-color .2s; }
.prio__item:hover { border-color: var(--a-accent); }
.prio__item--hot { background: var(--cap-gold); border-color: var(--cap-gold); color: #1b150a; }
.prio__item--hot .row__main small { color: #3d3016; }
.prio__item--hot:hover { background: var(--cap-gold-2); }
.prio__ico { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 9px; background: rgba(0, 0, 0, 0.18); color: var(--cap-gold); }
.prio__item--hot .prio__ico { color: #1b150a; background: rgba(0, 0, 0, 0.1); }
.deadlines { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--a-line); margin-top: 10px; }
.deadlines button { display: grid; gap: 4px; min-width: 0; padding: 12px 14px; border: 0; border-top: 1px solid var(--a-line); background: #0a1310; color: var(--a-text); text-align: left; font: inherit; cursor: pointer; }
.deadlines button:nth-child(odd) { border-right: 1px solid var(--a-line); }
.deadlines button:nth-child(-n+2) { border-top: 0; }
.deadlines button:hover { background: var(--a-chip); }
.deadlines small { font-size: 12px; color: var(--a-faint); }
.deadlines strong { font: 600 22px var(--font-ui); font-variant-numeric: tabular-nums; }
.deadlines span { font-size: 12px; color: var(--a-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Ficha do cliente */
.split--file { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); }
.client-file { display: grid; gap: 14px; align-content: start; }
.client-file__name { margin: 0; font: 600 18px var(--font-ui); }
.client-file__meta { margin: 2px 0 0; font-size: 12px; color: var(--a-faint); }
.carne { border: 1px solid var(--a-line); border-radius: 10px; overflow: hidden; }
.carne__head { display: flex; justify-content: space-between; padding: 10px 12px; background: rgba(201, 166, 107, 0.08); font: 600 11px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--cap-gold); }
.carne__row { display: grid; grid-template-columns: 1fr 1.2fr auto auto; gap: 10px; align-items: center; padding: 9px 12px; border-top: 1px solid var(--a-line); font-size: 13px; font-variant-numeric: tabular-nums; }
.carne__row span:nth-child(2) { color: var(--a-faint); }

/* ---------- DSR Docs: editor e Conferência final ---------- */
.ed__seg { display: none; margin-bottom: 14px; }
.ed { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 18px; align-items: start; }
.ed__form { display: grid; gap: 14px; min-width: 0; }
.ed__side { display: grid; gap: 12px; position: sticky; top: 0; min-width: 0; }
.dsec { position: relative; padding: 18px; border-radius: 14px; background: var(--a-card); border: 1px solid var(--a-line); overflow: hidden; }
.dsec::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, #2758b8, #8fb4f0 55%, transparent); opacity: .7; }
.dsec h4 { margin: 0; font: 600 16px var(--font-ui); letter-spacing: -.01em; }
.dsec > p { margin: 4px 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--a-line); font-size: 13px; color: var(--a-muted); }
.dsec__label { display: block; margin-bottom: 8px; font: 600 12px var(--font-ui); color: var(--a-muted); }
.ed-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ed-tabs button { min-height: 44px; border-radius: 9px; border: 1px solid var(--a-line); background: var(--a-card); color: var(--a-muted); font: 500 13px var(--font-ui); }
.ed-tabs button[aria-pressed="true"] { border-color: var(--a-accent); background: var(--a-chip); color: var(--a-text); box-shadow: inset 0 -2px 0 var(--a-accent); }
.ed-sub { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; margin-top: 10px; }
.ed-sub__card { position: relative; display: grid; gap: 4px; padding: 12px 36px 12px 12px; border-radius: 10px; border: 1px solid var(--a-line); background: #ffffff; color: var(--a-text); text-align: left; font: inherit; cursor: pointer; }
.ed-sub__card b { font: 700 11px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; }
.ed-sub__card span { font-size: 12px; line-height: 1.45; color: var(--a-muted); }
.ed-sub__card svg { position: absolute; top: 10px; right: 10px; width: 18px; height: 18px; padding: 3px; border-radius: 50%; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.ed-sub__card[aria-pressed="true"] { border-color: #2758b8; background: #e3ecfb; }
.ed-sub__card[aria-pressed="true"] b { color: #1f4ea8; }
.ed-sub__card[aria-pressed="true"] svg { opacity: 1; background: #2758b8; }
.ed-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.ed-grid .field input, .ed-grid .field select { width: 100%; min-width: 0; }
.field--wide { grid-column: span 2; }
.cpf-tag { display: inline-flex; align-items: center; gap: 4px; font: 600 12px var(--font-ui); }
.cpf-tag--ok { color: #1f6b4f; }
.cpf-tag--warn { color: #b3261e; }
.cpf-tag--neutral { color: var(--a-faint); }
.cpf-tag--neutral svg { display: none; }
.conf { padding: 14px; border-radius: 14px; background: var(--a-card); border: 1px solid var(--a-line); }
.conf__head { display: flex; align-items: center; gap: 12px; }
.conf__ico { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: rgba(31, 107, 79, 0.1); color: #1f6b4f; }
.conf__head small { display: block; font: 700 11px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: #2758b8; }
.conf__head b { display: block; font: 500 15px var(--font-ui); }
.conf__ready { margin-left: auto; padding: 6px 12px; border-radius: 999px; font: 600 12px var(--font-ui); white-space: nowrap; }
.conf__ready--ok { color: #1f6b4f; background: rgba(31, 107, 79, 0.1); border: 1px solid rgba(31, 107, 79, 0.25); }
.conf__ready--warn { color: #8a5a12; background: rgba(138, 90, 18, 0.1); border: 1px solid rgba(138, 90, 18, 0.25); }
.conf__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.conf__grid div { min-width: 0; padding: 8px; border-radius: 8px; border: 1px solid var(--a-line); background: var(--a-card); }
.conf__grid small { display: block; font: 700 10px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--a-faint); }
.conf__grid span { display: block; margin-top: 2px; font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
.conf__ok { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; padding: 8px 10px; border-radius: 8px; background: rgba(31, 107, 79, 0.08); border: 1px solid rgba(31, 107, 79, 0.2); font: 600 12px var(--font-ui); color: #1f6b4f; }
.doc-sheet .doc-sheet__hidden { margin: 0 0 12px; text-align: center; font: 400 10px var(--font-ui); color: var(--ink-3); }
.pick--row { grid-template-columns: auto 1fr; align-items: start; gap: 12px; }
.pick--row h3 { margin-bottom: 2px; }

@media (max-width: 1180px) {
  .cap-layout { grid-template-columns: 1fr; }
  .cap-aside { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 980px) {
  .ed__seg { display: inline-flex; }
  .ed { grid-template-columns: 1fr; }
  .ed[data-pane-show="form"] .ed__side { display: none; }
  .ed[data-pane-show="preview"] .ed__form { display: none; }
  .ed__side { position: static; }
  .split--file { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .conf__head { flex-wrap: wrap; }
  .ed-tabs, .conf__grid { grid-template-columns: 1fr 1fr; }
  .ed-grid { grid-template-columns: 1fr; }
  .field--wide { grid-column: auto; }
  .cap-aside { grid-template-columns: 1fr; }
  .cap-search input { width: 140px; }
  .carne__row { grid-template-columns: 1fr auto; }
  .carne__row span:nth-child(2) { grid-column: 1; grid-row: 2; }
  .flow-grid { grid-template-columns: auto 1fr auto 1fr; }
}
@media (max-width: 480px) {
  .app--capital .kpi strong { font-size: clamp(18px, 5.5vw, 24px); overflow-wrap: normal; }
}

/* ---------- Vitrine: itens trancados ---------- */
.app__lock { display: inline-grid; place-items: center; margin-left: auto; color: var(--a-faint); }
.app__lock svg { width: 14px; height: 14px; }
.app__nav button[data-locked] { color: var(--a-faint); }
.app__nav button[data-locked][aria-selected="true"] { color: var(--a-text); }
.locked { display: grid; justify-items: center; gap: 10px; max-width: 440px; margin: clamp(24px, 8vh, 72px) auto; padding: 32px 24px; border: 1px dashed var(--a-line); border-radius: 16px; text-align: center; }
.locked__ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--a-chip); color: var(--a-accent); }
.locked__ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.locked .v-h { margin: 4px 0 0; }
.locked p { margin: 0 0 8px; font-size: 14px; line-height: 1.6; color: var(--a-muted); }
.locked .act { text-decoration: none; }
.ed-hint { margin: 10px 0 0; font-size: 13px; color: var(--a-muted); }
.app__more { margin: 0; font-size: 12px; line-height: 1.5; color: var(--a-faint); }
.deadlines:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
.deadlines:has(> :nth-child(3):last-child) button { border-top: 0; border-right: 1px solid var(--a-line); }
.deadlines:has(> :nth-child(3):last-child) button:last-child { border-right: 0; }

/* ---------- Capital: sugestão de "há muito mais" sem nomear as áreas ---------- */
.app__more-wrap { display: grid; gap: 12px; }
.ghosts { display: grid; gap: 2px; padding: 0 2px; -webkit-mask-image: linear-gradient(180deg, #000 10%, transparent 100%); mask-image: linear-gradient(180deg, #000 10%, transparent 100%); }
.ghosts__row { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 10px; }
.ghosts__row i { flex: none; width: 18px; height: 18px; border-radius: 5px; background: rgba(180, 230, 210, 0.1); }
.ghosts__row b { display: block; height: 9px; border-radius: 5px; background: rgba(180, 230, 210, 0.1); }
@media (prefers-reduced-motion: no-preference) {
  .ghosts__row { animation: ghost 3.2s ease-in-out infinite; }
  .ghosts__row:nth-child(2) { animation-delay: .25s; } .ghosts__row:nth-child(3) { animation-delay: .5s; }
  .ghosts__row:nth-child(4) { animation-delay: .75s; } .ghosts__row:nth-child(5) { animation-delay: 1s; } .ghosts__row:nth-child(6) { animation-delay: 1.25s; }
  @keyframes ghost { 50% { opacity: .45; } }
}
.ghosts__cta { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border-radius: 12px; border: 1px dashed var(--a-line); color: var(--a-text); text-decoration: none; transition: border-color .2s, background-color .2s; }
.ghosts__cta:hover { border-color: var(--a-accent); background: var(--a-chip); }
.ghosts__cta svg { flex: none; width: 16px; height: 16px; margin-top: 2px; fill: none; stroke: var(--a-accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ghosts__cta b { display: block; font: 600 13px var(--font-ui); }
.ghosts__cta small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--a-faint); }
@media (max-width: 820px) {
  .app__more-wrap { display: none; }
}

.note--more { display: none; }
.split--file[data-empty] { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 820px) { .note--more { display: block; margin-top: 4px; } }
@media (max-width: 820px) { .app__nav button[data-locked] { display: none; } }

/* ---------- Moldura de janela das interfaces ---------- */
.app--capital > .app__side, .app--capital > .app__main { grid-row: 2; }
.app__chrome { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; min-height: 44px; padding: 0 14px; border-bottom: 1px solid var(--a-line); background: linear-gradient(180deg, color-mix(in oklab, var(--a-side) 88%, #fff), var(--a-side)); }
.app__dots { display: inline-flex; gap: 6px; }
.app__dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--a-line); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); }
.app__addr { display: inline-flex; align-items: center; gap: 7px; margin-inline: auto; padding: 4px 14px; border-radius: 999px; border: 1px solid var(--a-line); background: var(--a-bg); color: var(--a-faint); font: 500 12px var(--font-ui); white-space: nowrap; }
.app__addr svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.app__fict { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--a-line); color: var(--a-faint); font: 600 10px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.app__demo { display: none; }
@media (max-width: 820px) {
  .app > .app__side, .app > .app__main { grid-row: auto; }
  .app { grid-template-rows: none; }
}
@media (max-width: 560px) { .app__fict { display: none; } .app__addr { margin-inline: 0 auto; font-size: 11px; } }

/* Docs: editor direto, sem a navegação de painel do Capital. */
.app--docs { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; }
.app--docs :focus-visible { outline-color: var(--a-accent); }
.docs-workspace__header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 20px 24px; border-bottom: 1px solid var(--a-line);
  background: var(--a-side);
}
.docs-workspace__header .app__product { padding: 0; border: 0; }
.docs-workspace__header .act { min-height: 44px; flex-shrink: 0; }
.app--docs .app__view { padding: 24px; }
@media (max-width: 560px) {
  .docs-workspace__header { gap: 10px; padding: 16px 12px; flex-wrap: wrap; }
  .docs-workspace__header .app__product { gap: 8px; }
  .docs-workspace__header .app__product img { width: 32px; height: 32px; }
  .docs-workspace__header .app__product b { font-size: 17px; }
  .docs-workspace__header .app__product small { font-size: 10px; }
  .docs-workspace__header .act { padding-inline: 10px; font-size: 12px; }
  .app--docs .app__view { padding: 14px 12px; }
}