/* Melhorias e erros (#dev-demandas). Tudo sob .dv / .dv-camada. Tokens locais; claro e escuro seguem o tema do portal. */
.dv, .dv-camada, .dv-pop {
  --dv-ink: var(--ink, #102d24);
  --dv-mut: var(--ink-soft, #2f4a40);
  --dv-fraco: color-mix(in srgb, var(--dv-ink) 52%, transparent);
  --dv-fundo: var(--panel, #fff);
  --dv-linha: var(--line, #e3ebe6);
  --dv-linha-forte: color-mix(in srgb, var(--dv-ink) 18%, transparent);
  --dv-leve: color-mix(in srgb, var(--dv-ink) 4%, transparent);
  --dv-acento: var(--brand, #0a9492);
  --dv-titulo: 'Bricolage Grotesque', 'Manrope', system-ui, sans-serif;
  --dv-raio: 12px;
  --c-nao_analisado: #64748b;
  --c-analisado: #b7791f;
  --c-em_desenvolvimento: #2f6bff;
  --c-finalizada: #1f9d6b;
  --c-cancelada: #9a6b78;
  --p-baixa: #7b8aa0;
  --p-media: #3d7bd9;
  --p-alta: #e8590c;
  --p-critica: #d6264f;
  font-family: 'Manrope', system-ui, sans-serif;
  color: var(--dv-ink);
}
:root[data-theme="dark"] .dv, :root[data-theme="dark"] .dv-camada, :root[data-theme="dark"] .dv-pop {
  --c-nao_analisado: #94a3b8; --c-analisado: #e0a93b; --c-em_desenvolvimento: #6d9bff;
  --c-finalizada: #3ecf94; --c-cancelada: #c18d9b;
  --p-baixa: #94a3b8; --p-media: #6aa0f5; --p-alta: #ff8a4c; --p-critica: #ff5c7f;
}
.dv *, .dv-camada *, .dv-pop, .dv-pop * { box-sizing: border-box; }
.dv button, .dv-camada button, .dv input, .dv-camada input, .dv textarea, .dv-camada textarea { font-family: inherit; }
.dv button:focus-visible, .dv-camada button:focus-visible, .dv input:focus-visible, .dv-camada input:focus-visible,
.dv textarea:focus-visible, .dv-camada textarea:focus-visible, .dv-rich:focus-visible, .dv [tabindex]:focus-visible {
  outline: 2px solid var(--dv-acento); outline-offset: 2px;
}

/* ------------------------------------------------------------ barra de ferramentas */
.dv { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.dv-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.dv-busca { position: relative; flex: 1 1 240px; min-width: 200px; max-width: 420px; }
.dv-busca svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--dv-fraco); pointer-events: none; }
.dv-busca input { width: 100%; height: 40px; padding: 0 12px 0 36px; border: 1px solid var(--dv-linha-forte); border-radius: 10px; background: var(--dv-fundo); color: var(--dv-ink); font-size: 13.5px; }
.dv-bar-fim { margin-left: auto; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.dv-visao { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--dv-leve); border: 1px solid var(--dv-linha); }
.dv-visao button { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--dv-mut); font-size: 13px; font-weight: 700; cursor: pointer; }
.dv-visao button[aria-pressed="true"] { background: var(--dv-fundo); color: var(--dv-ink); box-shadow: 0 1px 3px rgba(16, 45, 36, .16); }
.dv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--dv-linha-forte); background: var(--dv-fundo); color: var(--dv-ink); font-size: 13.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.dv-btn:hover { background: var(--dv-leve); }
.dv-btn--pri { background: var(--dv-acento); border-color: var(--dv-acento); color: #fff; }
.dv-btn--pri:hover { background: color-mix(in srgb, var(--dv-acento) 88%, #000); }
.dv-btn--sec { height: 34px; padding: 0 12px; font-size: 13px; }
.dv-btn--perigo { color: #b4233f; border-color: color-mix(in srgb, #b4233f 40%, transparent); }
.dv-btn--perigo:hover { background: color-mix(in srgb, #b4233f 8%, transparent); }
.dv-btn--bloco { width: 100%; }
.dv-btn[disabled] { opacity: .55; cursor: not-allowed; }
.dv-filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ------------------------------------------------------------ fluxo (resumo clicável) */
.dv-fluxo { display: flex; gap: 3px; height: 54px; border-radius: 12px; overflow: hidden; background: var(--dv-leve); }
.dv-fluxo button { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 0 12px; border: 0; background: color-mix(in srgb, var(--c) 13%, var(--dv-fundo)); cursor: pointer; text-align: left; color: var(--dv-ink); transition: filter .15s; }
.dv-fluxo button::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--c); }
.dv-fluxo button:hover { filter: brightness(.97); }
.dv-fluxo button[aria-pressed="true"] { background: color-mix(in srgb, var(--c) 26%, var(--dv-fundo)); }
.dv-fluxo b { font-family: var(--dv-titulo); font-size: 21px; line-height: 1; font-variant-numeric: tabular-nums; }
.dv-fluxo span { font-size: 12px; font-weight: 700; color: var(--dv-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ------------------------------------------------------------ quadro */
.dv-quadro { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(272px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; align-items: start; }
.dv-col { scroll-snap-align: start; display: flex; flex-direction: column; min-width: 0; border-radius: var(--dv-raio); background: color-mix(in srgb, var(--c) 6%, var(--dv-leve)); border: 1px solid color-mix(in srgb, var(--c) 18%, transparent); max-height: calc(100vh - 290px); min-height: 220px; transition: box-shadow .15s, border-color .15s; }
.dv-col.is-alvo { border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent); }
.dv-col-cab { display: flex; align-items: center; gap: 8px; padding: 12px 12px 8px; flex: none; }
.dv-col-cab i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: none; }
.dv-col-cab h3 { margin: 0; font-family: var(--dv-titulo); font-size: 15px; font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-col-cab em { font-style: normal; font-size: 12px; font-weight: 800; color: var(--dv-mut); background: var(--dv-fundo); border-radius: 999px; padding: 2px 9px; font-variant-numeric: tabular-nums; }
.dv-col-cab button { width: 26px; height: 26px; display: grid; place-items: center; border: 0; border-radius: 7px; background: transparent; color: var(--dv-mut); cursor: pointer; }
.dv-col-cab button:hover { background: var(--dv-fundo); color: var(--dv-ink); }
.dv-col-corpo { display: flex; flex-direction: column; gap: 8px; padding: 4px 10px 12px; overflow-y: auto; min-height: 60px; flex: 1; }
.dv-vazio { margin: auto 0; padding: 18px 8px; text-align: center; font-size: 12.5px; color: var(--dv-fraco); line-height: 1.45; }

.dv-card { position: relative; display: block; width: 100%; text-align: left; padding: 11px 12px 10px 15px; border: 1px solid var(--dv-linha); border-radius: 10px; background: var(--dv-fundo); color: var(--dv-ink); cursor: pointer; box-shadow: 0 1px 2px rgba(16, 45, 36, .06); transition: box-shadow .15s, transform .15s, border-color .15s; }
.dv-card::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 4px; border-radius: 0 4px 4px 0; background: var(--c); }
.dv-card:hover { border-color: var(--dv-linha-forte); box-shadow: 0 6px 16px rgba(16, 45, 36, .12); transform: translateY(-1px); }
.dv-card.is-arrastando { opacity: .45; transform: rotate(1.2deg); }
.dv-card.is-novo { animation: dvPulso 1.6s ease-out 1; }
@keyframes dvPulso { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 55%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } }
.dv-card-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.dv-card-id { font-size: 11.5px; font-weight: 700; color: var(--dv-fraco); font-variant-numeric: tabular-nums; }
.dv-card-tit { margin: 0 0 4px; font-size: 14px; line-height: 1.32; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.dv-card-previa { margin: 0 0 9px; font-size: 12.5px; line-height: 1.42; color: var(--dv-mut); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.dv-card-pe { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dv-card-data { font-size: 11.5px; color: var(--dv-fraco); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* prioridade: quatro barras de sinal */
.dv-prio { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--dv-mut); white-space: nowrap; }
.dv-sinal { display: inline-flex; align-items: flex-end; gap: 2px; height: 13px; }
.dv-sinal i { width: 3px; border-radius: 1px; background: color-mix(in srgb, var(--dv-ink) 18%, transparent); }
.dv-sinal i:nth-child(1) { height: 4px; } .dv-sinal i:nth-child(2) { height: 7px; } .dv-sinal i:nth-child(3) { height: 10px; } .dv-sinal i:nth-child(4) { height: 13px; }
.dv-sinal[data-n="1"] i:nth-child(-n+1), .dv-sinal[data-n="2"] i:nth-child(-n+2), .dv-sinal[data-n="3"] i:nth-child(-n+3), .dv-sinal[data-n="4"] i:nth-child(-n+4) { background: var(--pc); }

/* pessoa */
.dv-pessoa { display: inline-flex; align-items: center; gap: 7px; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--dv-ink); }
.dv-pessoa span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-pessoa.is-vazio { color: var(--dv-fraco); font-weight: 500; }
.dv-av { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 800; color: #fff; background: hsl(var(--h) 46% 42%); letter-spacing: .02em; }
.dv-av--g { width: 34px; height: 34px; font-size: 12.5px; }
.dv-av--v { background: transparent; border: 1.5px dashed var(--dv-linha-forte); color: var(--dv-fraco); }

/* ------------------------------------------------------------ lista */
.dv-lista-wrap { border: 1px solid var(--dv-linha); border-radius: var(--dv-raio); background: var(--dv-fundo); overflow-x: auto; }
.dv-tab { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 980px; }
.dv-tab th { position: sticky; top: 0; text-align: left; padding: 0; background: var(--dv-leve); border-bottom: 1px solid var(--dv-linha); white-space: nowrap; }
.dv-tab th button { display: inline-flex; align-items: center; gap: 5px; width: 100%; padding: 11px 12px; border: 0; background: transparent; color: var(--dv-mut); font-size: 12.5px; font-weight: 800; cursor: pointer; text-align: left; }
.dv-tab th button:hover { color: var(--dv-ink); }
.dv-tab th .seta { opacity: .35; font-size: 10px; }
.dv-tab th[aria-sort] .seta { opacity: 1; color: var(--dv-acento); }
.dv-tab td { padding: 10px 12px; border-bottom: 1px solid var(--dv-linha); vertical-align: middle; }
.dv-tab tbody tr { cursor: pointer; }
.dv-tab tbody tr:hover td { background: var(--dv-leve); }
.dv-tab tbody tr:last-child td { border-bottom: 0; }
.dv-tab td.tit { max-width: 420px; }
.dv-tab td.tit b { display: block; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-tab td.tit small { display: block; color: var(--dv-fraco); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.dv-tab td.dt { white-space: nowrap; color: var(--dv-mut); font-variant-numeric: tabular-nums; }
.dv-pilula { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--dv-ink); background: color-mix(in srgb, var(--c) 15%, transparent); white-space: nowrap; }
.dv-pilula i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.dv-mais { display: flex; justify-content: center; padding: 12px; }

.dv-estado { padding: 56px 20px; text-align: center; color: var(--dv-mut); font-size: 14px; line-height: 1.5; border: 1px dashed var(--dv-linha-forte); border-radius: var(--dv-raio); }
.dv-estado strong { display: block; font-family: var(--dv-titulo); font-size: 18px; color: var(--dv-ink); margin-bottom: 6px; }
.dv-estado .dv-btn { margin-top: 14px; }

/* ------------------------------------------------------------ camada (modal) */
.dv-camada { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; padding: 24px; background: rgba(10, 24, 20, .55); backdrop-filter: blur(3px); animation: dvFundo .16s ease-out; }
.dv-camada--alto { z-index: 9100; }
@keyframes dvFundo { from { opacity: 0; } to { opacity: 1; } }
@keyframes dvSobe { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
.dv-modal { width: min(1040px, 100%); max-height: min(92vh, 900px); display: flex; flex-direction: column; border-radius: 18px; background: var(--dv-fundo); box-shadow: 0 30px 80px rgba(0, 0, 0, .35); overflow: hidden; animation: dvSobe .2s cubic-bezier(.2, .8, .2, 1); }
.dv-modal--medio { width: min(720px, 100%); }
.dv-modal--peq { width: min(460px, 100%); }
.dv-modal-cab { display: flex; align-items: flex-start; gap: 14px; padding: 20px 24px 14px; flex: none; }
.dv-modal-cab > div { flex: 1; min-width: 0; }
.dv-modal-cab h2 { margin: 0; font-family: var(--dv-titulo); font-size: 24px; line-height: 1.2; font-weight: 700; overflow-wrap: anywhere; }
.dv-modal-sub { margin: 7px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 12.5px; color: var(--dv-mut); }
.dv-modal-sub .dv-pessoa { font-size: 12.5px; }
.dv-x { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; color: var(--dv-mut); cursor: pointer; }
.dv-x:hover { background: var(--dv-leve); color: var(--dv-ink); }
.dv-modal-corpo { display: grid; grid-template-columns: minmax(0, 1fr) 310px; flex: 1; min-height: 0; border-top: 1px solid var(--dv-linha); }
.dv-modal-corpo--uma { grid-template-columns: minmax(0, 1fr); }
.dv-principal { padding: 20px 24px 28px; overflow-y: auto; min-width: 0; }
.dv-propriedades { padding: 20px 20px 24px; overflow-y: auto; background: var(--dv-leve); border-left: 1px solid var(--dv-linha); display: flex; flex-direction: column; gap: 16px; }
.dv-prop { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.dv-prop > label, .dv-prop > .rot, .dv-campo > label { font-size: 12.5px; font-weight: 700; color: var(--dv-mut); }
.dv-prop-val { font-size: 13.5px; font-weight: 600; color: var(--dv-ink); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dv-prop-val small { font-size: 12px; font-weight: 500; color: var(--dv-fraco); }
.dv-acoes { display: flex; flex-direction: column; gap: 8px; padding-bottom: 16px; border-bottom: 1px solid var(--dv-linha); }
.dv-modal-pe { display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding: 14px 24px; border-top: 1px solid var(--dv-linha); flex: none; background: var(--dv-fundo); }
.dv-modal-pe .esq { margin-right: auto; font-size: 12.5px; color: var(--dv-fraco); }

/* trilha: onde a demanda está no caminho */
.dv-trilha { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); margin: 2px 0 22px; }
.dv-trilha::before, .dv-trilha-fio { content: ""; position: absolute; top: 13px; left: 12.5%; height: 3px; border-radius: 2px; }
.dv-trilha::before { right: 12.5%; background: var(--dv-linha-forte); }
.dv-trilha-fio { background: var(--cfio, var(--dv-acento)); width: var(--prog, 0%); transition: width .5s cubic-bezier(.2, .8, .2, 1); z-index: 1; }
.dv-no { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 0 4px; border: 0; background: transparent; cursor: pointer; color: var(--dv-fraco); text-align: center; font-size: 12.5px; font-weight: 700; }
.dv-no .bola { width: 29px; height: 29px; border-radius: 50%; display: grid; place-items: center; background: var(--dv-fundo); border: 3px solid var(--dv-linha-forte); color: transparent; transition: background .2s, border-color .2s, transform .2s; }
.dv-no:hover .bola { transform: scale(1.1); border-color: var(--c); }
.dv-no.is-feito .bola { background: var(--c); border-color: var(--c); color: #fff; }
.dv-no.is-agora .bola { background: var(--dv-fundo); border-color: var(--c); box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 22%, transparent); color: var(--c); }
.dv-no.is-feito, .dv-no.is-agora { color: var(--dv-ink); }
.dv-no small { display: block; max-width: 100%; font-size: 11.5px; font-weight: 500; color: var(--dv-fraco); line-height: 1.3; }

.dv-secao { margin: 0 0 22px; }
.dv-secao > h3 { margin: 0 0 10px; font-family: var(--dv-titulo); font-size: 16px; font-weight: 700; }
.dv-aviso-fim { display: flex; align-items: center; gap: 8px; margin: -6px 0 18px; padding: 9px 12px; border-radius: 10px; font-size: 13px; font-weight: 600; background: color-mix(in srgb, var(--c-cancelada) 14%, transparent); color: var(--dv-ink); }

/* texto rico (leitura e editor) */
.dv-rich { font-size: 14.5px; line-height: 1.6; color: var(--dv-ink); overflow-wrap: anywhere; }
.dv-rich > :first-child { margin-top: 0; } .dv-rich > :last-child { margin-bottom: 0; }
.dv-rich p { margin: 0 0 10px; }
.dv-rich h2 { font-family: var(--dv-titulo); font-size: 21px; line-height: 1.25; margin: 20px 0 8px; }
.dv-rich h3 { font-family: var(--dv-titulo); font-size: 17px; line-height: 1.3; margin: 16px 0 6px; }
.dv-rich ul, .dv-rich ol { margin: 0 0 10px; padding-left: 24px; }
.dv-rich li { margin: 2px 0; }
.dv-rich blockquote { margin: 0 0 10px; padding: 4px 0 4px 14px; border-left: 4px solid var(--dv-acento); color: var(--dv-mut); }
.dv-rich code { padding: 1px 6px; border-radius: 5px; background: var(--dv-leve); border: 1px solid var(--dv-linha); font-family: ui-monospace, Consolas, monospace; font-size: .9em; }
.dv-rich pre { margin: 0 0 10px; padding: 12px 14px; border-radius: 10px; background: var(--dv-leve); border: 1px solid var(--dv-linha); overflow-x: auto; font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
.dv-rich hr { border: 0; border-top: 2px solid var(--dv-linha); margin: 16px 0; }
.dv-rich a { color: var(--dv-acento); text-decoration: underline; text-underline-offset: 2px; }
.dv-rich ul[data-check] { list-style: none; padding-left: 4px; }
.dv-rich ul[data-check] > li { position: relative; padding-left: 30px; min-height: 24px; }
.dv-rich ul[data-check] > li::before { content: ""; position: absolute; left: 3px; top: 4px; width: 16px; height: 16px; border-radius: 5px; border: 2px solid var(--dv-linha-forte); background: var(--dv-fundo); cursor: pointer; }
.dv-rich ul[data-check] > li[data-feito="1"]::before { background: var(--c-finalizada) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 11px no-repeat; border-color: var(--c-finalizada); }
.dv-rich ul[data-check] > li[data-feito="1"] { color: var(--dv-fraco); text-decoration: line-through; }
.dv-vazio-txt { color: var(--dv-fraco); font-style: italic; }

/* editor */
.dv-editor { border: 1px solid var(--dv-linha-forte); border-radius: 12px; background: var(--dv-fundo); }
.dv-editor:focus-within { border-color: var(--dv-acento); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dv-acento) 18%, transparent); }
.dv-ed-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 6px 8px; border-bottom: 1px solid var(--dv-linha); background: var(--dv-leve); border-radius: 12px 12px 0 0; position: sticky; top: 0; z-index: 3; }
.dv-ed-barra button { min-width: 32px; height: 32px; padding: 0 7px; display: inline-grid; place-items: center; border: 0; border-radius: 7px; background: transparent; color: var(--dv-mut); font-size: 13px; font-weight: 800; cursor: pointer; }
.dv-ed-barra button:hover { background: var(--dv-fundo); color: var(--dv-ink); }
.dv-ed-barra button.is-on { background: color-mix(in srgb, var(--dv-acento) 18%, transparent); color: var(--dv-acento); }
.dv-ed-barra .sep { width: 1px; height: 20px; background: var(--dv-linha-forte); margin: 0 5px; }
.dv-ed-area { padding: 14px 16px; min-height: var(--dv-min, 200px); max-height: var(--dv-max, 46vh); overflow-y: auto; outline: 0; }
.dv-ed-area[data-vazio="1"]::before { content: attr(data-ph); position: absolute; left: 16px; top: 14px; right: 16px; color: var(--dv-fraco); pointer-events: none; }
.dv-ed-dica { padding: 6px 12px 8px; font-size: 12px; color: var(--dv-fraco); border-top: 1px solid var(--dv-linha); }
.dv-pop { position: fixed; z-index: 9300; min-width: 220px; max-width: 320px; max-height: 280px; overflow-y: auto; padding: 5px; border-radius: 12px; background: var(--dv-fundo); border: 1px solid var(--dv-linha-forte); box-shadow: 0 14px 36px rgba(0, 0, 0, .25); color: var(--dv-ink); font-family: 'Manrope', system-ui, sans-serif; }
.dv-pop button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: inherit; font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.dv-pop button:hover, .dv-pop button.is-sel { background: var(--dv-leve); }
.dv-pop button small { display: block; font-size: 11.5px; color: var(--dv-fraco); }
.dv-pop button .ic { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 7px; border: 1px solid var(--dv-linha); font-weight: 800; font-size: 12px; color: var(--dv-mut); }
.dv-pop-link { display: flex; gap: 6px; padding: 6px; }
.dv-pop-link input { flex: 1; height: 34px; padding: 0 10px; border: 1px solid var(--dv-linha-forte); border-radius: 8px; background: var(--dv-fundo); color: var(--dv-ink); font-size: 13px; min-width: 200px; }

/* campos de formulário */
.dv-campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; min-width: 0; }
.dv-campo .dica { font-size: 12px; color: var(--dv-fraco); }
.dv-in { width: 100%; height: 44px; padding: 0 14px; border: 1px solid var(--dv-linha-forte); border-radius: 10px; background: var(--dv-fundo); color: var(--dv-ink); font-size: 15px; font-weight: 600; }
.dv-in--titulo { font-family: var(--dv-titulo); font-size: 20px; height: 52px; }
.dv-ta { width: 100%; min-height: 84px; padding: 10px 12px; border: 1px solid var(--dv-linha-forte); border-radius: 10px; background: var(--dv-fundo); color: var(--dv-ink); font-size: 14px; line-height: 1.5; resize: vertical; }
.dv-conta { align-self: flex-end; font-size: 11.5px; color: var(--dv-fraco); font-variant-numeric: tabular-nums; }
.dv-erro { margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, #d6264f 10%, transparent); color: #a11d3f; font-size: 13px; font-weight: 600; }
:root[data-theme="dark"] .dv-erro { color: #ff9db3; }
.dv-grupo { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.dv-grupo button { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 11px 6px; border: 1.5px solid var(--dv-linha-forte); border-radius: 10px; background: var(--dv-fundo); color: var(--dv-mut); font-size: 13px; font-weight: 700; cursor: pointer; }
.dv-grupo button .dv-sinal { height: 15px; }
.dv-grupo button[aria-checked="true"] { border-color: var(--pc); background: color-mix(in srgb, var(--pc) 10%, var(--dv-fundo)); color: var(--dv-ink); }
.dv-combo { position: relative; }
.dv-combo input { padding-right: 38px; }
.dv-combo .limpa { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: var(--dv-fraco); cursor: pointer; display: grid; place-items: center; }
.dv-combo .limpa:hover { background: var(--dv-leve); color: var(--dv-ink); }
.dv-combo-in { height: 40px; font-size: 14px; }

/* atividade */
.dv-nota-nova { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.dv-nota-nova .dv-btn { align-self: flex-end; }
.dv-linha-tempo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.dv-evento { position: relative; display: grid; grid-template-columns: 24px 1fr; gap: 10px; padding-bottom: 14px; }
.dv-evento::before { content: ""; position: absolute; left: 11px; top: 22px; bottom: 0; width: 2px; background: var(--dv-linha); }
.dv-evento:last-child::before { display: none; }
.dv-evento .pt { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--dv-leve); border: 2px solid var(--dv-linha-forte); }
.dv-evento .pt i { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--dv-fraco)); }
.dv-evento p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--dv-ink); overflow-wrap: anywhere; }
.dv-evento time { display: block; margin-top: 1px; font-size: 12px; color: var(--dv-fraco); }
.dv-evento blockquote { margin: 6px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--dv-leve); border: 1px solid var(--dv-linha); font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }

body.dv-trava { overflow: hidden; }

/* ------------------------------------------------------------ celular */
@media (max-width: 860px) {
  .dv-camada { padding: 0; align-items: stretch; }
  .dv-modal { width: 100%; max-height: 100vh; height: 100%; border-radius: 0; }
  .dv-modal--peq { height: auto; align-self: center; border-radius: 16px; width: calc(100% - 24px); max-height: 92vh; margin: 0 12px; }
  .dv-modal-corpo { grid-template-columns: minmax(0, 1fr); overflow-y: auto; display: block; }
  .dv-principal, .dv-propriedades { overflow: visible; }
  .dv-propriedades { border-left: 0; border-top: 1px solid var(--dv-linha); }
  .dv-modal-cab { padding: 16px 16px 12px; }
  .dv-modal-cab h2 { font-size: 21px; }
  .dv-principal { padding: 16px 16px 20px; }
  .dv-modal-pe { padding: 12px 16px; }
  .dv-grupo { grid-template-columns: repeat(2, 1fr); }
  .dv-quadro { grid-auto-columns: 84%; }
  .dv-col { max-height: none; }
  .dv-fluxo { height: auto; flex-wrap: wrap; }
  .dv-fluxo button { flex: 1 1 30%; padding: 8px 10px; min-height: 52px; }
  .dv-bar-fim { margin-left: 0; width: 100%; }
  .dv-bar-fim .dv-btn--pri { flex: 1; }
  .dv-no small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dv *, .dv-camada, .dv-camada * { animation: none !important; transition: none !important; }
}

/* tipo: melhoria ou erro */
.dv, .dv-camada, .dv-pop { --t-melhoria: #6d4fe0; --t-erro: #c0262d; }
:root[data-theme="dark"] .dv, :root[data-theme="dark"] .dv-camada, :root[data-theme="dark"] .dv-pop { --t-melhoria: #a995ff; --t-erro: #ff7b80; }
.dv-tipo { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px 2px 7px; border-radius: 999px; font-size: 12px; font-weight: 800; white-space: nowrap; color: var(--tc); background: color-mix(in srgb, var(--tc) 13%, transparent); }
.dv-tipo[data-tipo="melhoria"], .dv-tipo-ic[data-tipo="melhoria"] { --tc: var(--t-melhoria); }
.dv-tipo[data-tipo="erro"], .dv-tipo-ic[data-tipo="erro"] { --tc: var(--t-erro); }
.dv-card-tags { display: inline-flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
.dv-tipos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dv-tipos button { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--dv-linha-forte); border-radius: 12px; background: var(--dv-fundo); color: var(--dv-ink); text-align: left; cursor: pointer; }
.dv-tipos button:hover { background: var(--dv-leve); }
.dv-tipos button b { display: block; font-size: 14.5px; }
.dv-tipos button small { display: block; font-size: 12px; font-weight: 500; color: var(--dv-mut); line-height: 1.35; margin-top: 1px; }
.dv-tipos button[aria-checked="true"] { border-color: var(--tc); background: color-mix(in srgb, var(--tc) 9%, var(--dv-fundo)); }
.dv-tipos button[data-tipo-novo="melhoria"] { --tc: var(--t-melhoria); }
.dv-tipos button[data-tipo-novo="erro"] { --tc: var(--t-erro); }
.dv-tipo-ic { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; color: var(--tc); background: color-mix(in srgb, var(--tc) 14%, transparent); }
@media (max-width: 860px) { .dv-tipos { grid-template-columns: 1fr; } }

/* ============================================================ fase 2: quadro por fases, tamanhos padrão, prazo, observação, editor completo */
.dv, .dv-camada, .dv-pop { --c-finalizada: #1f9d6b; --c-cancelada: #9a6b78; --ok: #1f9d6b; --aviso: #b7791f; --atraso: #d6264f; }
:root[data-theme="dark"] .dv, :root[data-theme="dark"] .dv-camada, :root[data-theme="dark"] .dv-pop { --c-finalizada: #3ecf94; --c-cancelada: #c18d9b; --ok: #3ecf94; --aviso: #e0a93b; --atraso: #ff5c7f; }

/* colunas e cards: tamanho único */
.dv-quadro { grid-auto-columns: 304px; align-items: stretch; }
.dv-col { width: 304px; height: clamp(480px, calc(100vh - 320px), 920px); max-height: none; min-height: 0; }
.dv-col-fase { display: flex; align-items: center; gap: 10px; padding: 0 14px 8px; flex: none; font-size: 12px; font-weight: 700; color: var(--dv-mut); }
.dv-card { flex: none; height: 200px; display: flex; flex-direction: column; overflow: hidden; padding-bottom: 14px; }
.dv-card-topo { flex: none; }
.dv-card-tit { flex: none; min-height: 37px; }
.dv-card-previa { flex: none; height: 37px; margin-bottom: 6px; }
.dv-card-chips { flex: none; display: flex; flex-wrap: nowrap; gap: 6px; height: 22px; overflow: hidden; margin-bottom: 4px; }
.dv-card-pe { flex: none; margin-top: auto; }
.dv-chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 7px; font-size: 11.5px; font-weight: 700; white-space: nowrap; color: var(--dv-mut); background: var(--dv-leve); border: 1px solid var(--dv-linha); }
.dv-chip.atraso, .dv-prazo-txt.atraso { color: var(--atraso); background: color-mix(in srgb, var(--atraso) 11%, transparent); border-color: color-mix(in srgb, var(--atraso) 35%, transparent); }
.dv-chip.aviso, .dv-prazo-txt.aviso { color: var(--aviso); background: color-mix(in srgb, var(--aviso) 13%, transparent); border-color: color-mix(in srgb, var(--aviso) 38%, transparent); }
.dv-chip.ok, .dv-prazo-txt.ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 11%, transparent); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.dv-prazo-txt { font-weight: 700; }
.dv-prazo-txt.atraso, .dv-prazo-txt.aviso, .dv-prazo-txt.ok { padding: 2px 8px; border-radius: 7px; border: 1px solid transparent; }

/* fases: quatro degraus, cada etapa vencida preenche um nível */
.dv-fases { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }
.dv-fases i { height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--dv-ink) 14%, transparent); transition: background .25s; }
.dv-fases[data-fase="1"] i:nth-child(-n+1), .dv-fases[data-fase="2"] i:nth-child(-n+2), .dv-fases[data-fase="3"] i:nth-child(-n+3), .dv-fases[data-fase="4"] i:nth-child(-n+4) { background: var(--c, var(--dv-acento)); }
.dv-fases[data-fase="4"] i { background: var(--c-finalizada); }
.dv-fases[data-fase="0"] i { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--c-cancelada) 55%, transparent) 0 3px, transparent 3px 6px); }
.dv-card .dv-fases { position: absolute; left: 12px; right: 12px; bottom: 0; }
.dv-card .dv-fases i { height: 4px; border-radius: 3px 3px 0 0; }
.dv-fases--col { width: 74px; flex: none; }
.dv-fases--col i { height: 4px; }
.dv-fases--aside { width: 100%; margin-top: 6px; }
.dv-col:nth-child(1) .dv-fases--col i { --c: var(--c-nao_analisado); }
.dv-col:nth-child(2) .dv-fases--col i { --c: var(--c-analisado); }
.dv-col:nth-child(3) .dv-fases--col i { --c: var(--c-em_desenvolvimento); }

/* ações extras */
.dv-btn--ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.dv-btn--ok:hover { background: color-mix(in srgb, var(--ok) 10%, transparent); }
.dv-in--data { height: 40px; font-size: 14px; flex: 1; min-width: 0; }
.dv-prazo { display: flex; align-items: center; gap: 6px; }
.dv-x--peq { width: 30px; height: 30px; flex: none; }
.dv-prazo-situ { font-size: 12px; font-weight: 700; color: var(--dv-mut); }
.dv-prazo-situ.atraso { color: var(--atraso); } .dv-prazo-situ.aviso { color: var(--aviso); } .dv-prazo-situ.ok { color: var(--ok); }
.dv-prog { height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--dv-ink) 12%, transparent); overflow: hidden; }
.dv-prog span { display: block; height: 100%; border-radius: 99px; background: var(--c-finalizada); transition: width .3s; }

/* observação do programador */
.dv-obs { padding: 14px 16px 12px; border: 1px solid color-mix(in srgb, var(--dv-acento) 30%, var(--dv-linha)); border-radius: 12px; background: color-mix(in srgb, var(--dv-acento) 5%, var(--dv-fundo)); }
.dv-obs > h3 { margin-bottom: 4px; }
.dv-obs-ajuda { margin: 0 0 10px; font-size: 12.5px; color: var(--dv-mut); }
.dv-obs .dv-ta { background: var(--dv-fundo); min-height: 96px; }
.dv-obs-texto { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.55; padding: 4px 0 2px; }
.dv-obs-pe { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.dv-obs-meta { margin-right: auto; font-size: 12px; color: var(--dv-fraco); }
.dv-aviso-fim { background: color-mix(in srgb, var(--c-cancelada) 14%, transparent); }

/* editor e leitura: destaque, tabela, realce, imagem */
.dv-rich mark { background: color-mix(in srgb, #f5c542 55%, transparent); color: inherit; padding: 0 2px; border-radius: 3px; }
.dv-rich div[data-destaque] { margin: 0 0 12px; padding: 10px 14px; border-radius: 10px; border-left: 4px solid var(--dc); background: color-mix(in srgb, var(--dc) 11%, transparent); }
.dv-rich div[data-destaque] > :last-child { margin-bottom: 0; }
.dv-rich div[data-destaque="info"] { --dc: var(--c-em_desenvolvimento); }
.dv-rich div[data-destaque="aviso"] { --dc: var(--aviso); }
.dv-rich div[data-destaque="ok"] { --dc: var(--ok); }
.dv-rich table { width: 100%; border-collapse: collapse; margin: 0 0 12px; font-size: .95em; table-layout: fixed; }
.dv-rich th, .dv-rich td { border: 1px solid var(--dv-linha-forte); padding: 7px 10px; vertical-align: top; text-align: left; overflow-wrap: anywhere; min-width: 40px; }
.dv-rich th { background: var(--dv-leve); font-weight: 800; }
.dv-rich img { max-width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--dv-linha); display: block; margin: 6px 0 12px; }
#dvDescLeitura img { cursor: zoom-in; }
.dv-ed-area img { cursor: default; }
.dv-ed-area img:hover { outline: 2px solid color-mix(in srgb, var(--dv-acento) 55%, transparent); }
.dv-ed-barra .so-tabela { display: none; }
.dv-ed-barra.em-tabela .so-tabela { display: inline-grid; color: var(--dv-acento); }
.dv-modal--img { width: min(1100px, 100%); background: var(--dv-fundo); }
.dv-img-corpo { padding: 0 20px 20px; overflow: auto; display: grid; place-items: center; background: var(--dv-leve); }
.dv-img-corpo img { max-width: 100%; max-height: 78vh; border-radius: 8px; }
.dv-camada--alto .dv-modal--img { max-height: 92vh; }

@media (max-width: 860px) {
  .dv-quadro { grid-auto-columns: 86%; }
  .dv-col { width: auto; height: min(74vh, 660px); }
}

/* ============================================================ fase 3: mais fases, modais grandes, editor que cresce, fundos opacos */
.dv, .dv-camada, .dv-pop {
  --c-pronta_publicar: #7a5af8; --c-em_espera: #c2813a;
  --dv-leve-solido: color-mix(in srgb, var(--dv-ink) 5%, var(--dv-fundo));
}
:root[data-theme="dark"] .dv, :root[data-theme="dark"] .dv-camada, :root[data-theme="dark"] .dv-pop {
  --c-pronta_publicar: #a893ff; --c-em_espera: #e0a05a;
}

/* ---- modais: grandes, com a informação inteira à vista */
.dv-camada { padding: 16px; }
.dv-modal { width: min(1320px, calc(100vw - 32px)); max-height: calc(100vh - 32px); }
.dv-modal--grande { width: min(1320px, calc(100vw - 32px)); height: min(980px, calc(100vh - 32px)); max-height: none; }
.dv-modal--peq { width: min(580px, 100%); height: auto; }
.dv-modal-cab { padding: 24px 32px 18px; }
.dv-modal-cab h2 { font-size: 28px; }
.dv-modal-sub { font-size: 13.5px; }
.dv-modal-corpo { grid-template-columns: minmax(0, 1fr) 380px; }
.dv-principal { padding: 24px 32px 40px; }
.dv-propriedades { padding: 24px 24px 32px; gap: 18px; }
.dv-modal-pe { padding: 16px 32px; }
.dv-rich { font-size: 15.5px; line-height: 1.65; }
.dv-prop > label, .dv-prop > .rot, .dv-campo > label, .dv-campo > .rot { font-size: 13px; font-weight: 700; color: var(--dv-mut); }
.dv-prop-val { font-size: 14px; }
.dv-campo > .rot .opc, .dv-campo > label .opc { font-weight: 500; color: var(--dv-fraco); }
.dv-propriedades .dv-campo { margin-bottom: 0; }
.dv-grupo--2 { grid-template-columns: repeat(2, 1fr); }
.dv-in--titulo { height: 54px; font-size: 19px; }

/* ---- editor: cresce com o texto (a rolagem é a do modal) e a barra fica colada no topo, com fundo sólido */
.dv-editor { overflow: visible; }
.dv-ed-barra { background: var(--dv-leve-solido); position: sticky; top: 0; z-index: 5; padding: 8px 10px; gap: 3px; }
.dv-ed-barra button { min-width: 34px; height: 34px; font-size: 13.5px; }
.dv-ed-area { max-height: none; overflow: visible; min-height: var(--dv-min, 300px); padding: 20px 24px; font-size: 15.5px; cursor: text; }
.dv-ed-area[data-vazio="1"]::before { left: 24px; top: 20px; right: 24px; }
.dv-ed-dica { padding: 8px 14px 10px; }
.dv-tab th { background: var(--dv-leve-solido); }

/* ---- quadro: 8 colunas do mesmo tamanho, resumo em grade */
.dv-quadro { grid-auto-columns: 292px; }
.dv-col { width: 292px; }
.dv-fluxo { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); height: auto; gap: 3px; }
.dv-fluxo button { min-height: 56px; }
.dv-chip--area { max-width: 118px; overflow: hidden; text-overflow: ellipsis; display: inline-block; line-height: 20px; }

/* ---- fases: seis degraus; fora do fluxo (espera, cancelada) fica tracejado com a cor do estado */
.dv-fases { grid-template-columns: repeat(5, 1fr); }
.dv-fases[data-fase="4"] i { background: color-mix(in srgb, var(--dv-ink) 14%, transparent); }
.dv-fases[data-fase="1"] i:nth-child(-n+1), .dv-fases[data-fase="2"] i:nth-child(-n+2), .dv-fases[data-fase="3"] i:nth-child(-n+3),
.dv-fases[data-fase="4"] i:nth-child(-n+4), .dv-fases[data-fase="5"] i:nth-child(-n+5) { background: var(--c, var(--dv-acento)); }
.dv-fases[data-fase="5"] i { background: var(--c-finalizada); }
.dv-fases[data-fase="0"] i { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--c, var(--c-cancelada)) 60%, transparent) 0 3px, transparent 3px 6px); }
.dv-fases--col { width: 96px; }

/* ---- trilha com N fases */
.dv-trilha { grid-template-columns: repeat(var(--n, 5), 1fr); margin: 4px 0 28px; }
.dv-trilha::before { left: calc(50% / var(--n, 5)); right: calc(50% / var(--n, 5)); }
.dv-trilha-fio { left: calc(50% / var(--n, 5)); }
.dv-trilha.is-fora .dv-trilha-fio { background: repeating-linear-gradient(90deg, var(--cfio) 0 8px, transparent 8px 13px); }
.dv-no { font-size: 13px; }
.dv-no small { font-size: 12px; }
.dv-aviso-espera { background: color-mix(in srgb, var(--c-em_espera) 15%, transparent); }

@media (max-width: 860px) {
  .dv-camada { padding: 0; }
  .dv-modal, .dv-modal--grande { width: 100%; height: 100%; max-height: 100%; }
  .dv-modal--peq { height: auto; width: calc(100% - 24px); }
  .dv-modal-corpo { display: block; overflow-y: auto; }
  .dv-principal { padding: 18px 18px 26px; }
  .dv-propriedades { padding: 18px 18px 28px; }
  .dv-modal-cab { padding: 16px 18px 12px; }
  .dv-modal-cab h2 { font-size: 22px; }
  .dv-modal-pe { padding: 12px 18px; }
  .dv-ed-area { padding: 14px 16px; }
  .dv-quadro { grid-auto-columns: 86%; }
  .dv-col { width: auto; }
  .dv-fluxo { grid-template-columns: repeat(2, 1fr); }
}

/* ---- barra de ferramentas em duas linhas: busca + visão/nova demanda, depois os quatro filtros iguais */
.dv-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; align-items: center; }
.dv-busca { max-width: none; min-width: 0; grid-column: 1; grid-row: 1; }
.dv-bar-fim { grid-column: 2; grid-row: 1; margin-left: 0; flex-wrap: nowrap; }
.dv-filtros { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.dv-filtros > div { min-width: 0; }
.dv-filtros [id$="-dd"] { display: block !important; width: 100% !important; }
.dv-fluxo { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (min-width: 1100px) { .dv-fluxo { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .dv-bar { grid-template-columns: minmax(0, 1fr); }
  .dv-busca, .dv-bar-fim, .dv-filtros { grid-column: 1; grid-row: auto; }
  .dv-bar-fim { width: 100%; }
  .dv-bar-fim .dv-btn--pri { flex: 1; }
  .dv-filtros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* o foco do editor já aparece na borda do conjunto (.dv-editor:focus-within); sem contorno duplo na área de texto */
.dv .dv-ed-area:focus, .dv .dv-ed-area:focus-visible, .dv-camada .dv-ed-area:focus, .dv-camada .dv-ed-area:focus-visible { outline: 0; }

/* chips do card: o que não cabe some inteiro (nunca meio cortado); o título de cada chip traz o texto completo */
.dv-card-chips { flex-wrap: wrap; height: 24px; overflow: hidden; align-content: flex-start; gap: 4px 6px; }
.dv-chip { flex: none; }
.dv-chip--area { flex: 0 1 auto; max-width: 100%; min-width: 0; white-space: nowrap; }

/* card: duas linhas de chips (prazo e tarefas em cima, área embaixo), altura única para todos */
.dv-card { height: 224px; }
.dv-card-chips { height: 50px; margin-bottom: 4px; }
.dv-quebra { flex-basis: 100%; height: 0; }
.dv-chip--area { color: var(--dv-mut); background: transparent; border-style: dashed; }

.dv-card-chips { row-gap: 0; }
.dv-chip--area { margin-top: 4px; }

/* lista: a coluna da demanda fica fixa à esquerda (fundo sólido) enquanto as outras rolam */
.dv-tab { min-width: 1500px; }
.dv-tab th:first-child, .dv-tab td:first-child { position: sticky; left: 0; z-index: 2; background: var(--dv-fundo); box-shadow: 1px 0 0 var(--dv-linha); }
.dv-tab th:first-child { background: var(--dv-leve-solido); z-index: 3; }
.dv-tab tbody tr:hover td:first-child { background: var(--dv-leve-solido); }
.dv-tab td.tit { min-width: 340px; max-width: 420px; }
.dv-tab td.tit small { white-space: nowrap; }

/* avisos de espera/cancelamento: texto corrido, sem colunas */
.dv-aviso-fim { display: block; line-height: 1.5; padding: 12px 16px; font-size: 13.5px; margin: -8px 0 22px; }
.dv-aviso-fim b { margin-right: 4px; }

/* tabela do texto: o CSS global de tabelas tira a borda da última linha e põe cabeçalho em maiúsculas; aqui não */
.dv-rich table th, .dv-rich table td { border: 1px solid var(--dv-linha-forte); }
.dv-rich table tr:last-child td, .dv-rich table tr:last-child th, .dv-rich table tbody tr:last-child td { border-bottom: 1px solid var(--dv-linha-forte); }
.dv-rich table th { text-transform: none; letter-spacing: normal; font-size: inherit; color: var(--dv-ink); background: var(--dv-leve-solido); }
.dv-rich table td { background: transparent; color: var(--dv-ink); font-size: inherit; }
.dv-rich table tbody tr:hover td { background: transparent; }

/* celular: trilha só com os pontos + linha da fase atual; resumo em duas colunas */
.dv-trilha-atual { display: none; }
@media (max-width: 860px) {
  .dv-trilha { margin: 2px 0 8px; }
  .dv-no { min-width: 0; padding: 0; }
  .dv-no > span:not(.bola), .dv-no > small { display: none; }
  .dv-trilha-atual { display: block; margin: 0 0 20px; padding: 10px 12px; border-radius: 10px; font-size: 13.5px; line-height: 1.4; background: color-mix(in srgb, var(--c) 12%, transparent); border-left: 4px solid var(--c); }
  .dv-trilha-atual span { display: block; font-size: 12px; color: var(--dv-fraco); margin-top: 1px; }
  .dv-fluxo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dv-fluxo button { min-height: 52px; }
  .dv-fluxo span { white-space: normal; }
}

/* celular: o próximo passo também aparece no alto do texto (as ações completas ficam depois das propriedades) */
.dv-acao-mobile { display: none; }
@media (max-width: 860px) { .dv-acao-mobile { display: block; margin: 0 0 18px; } }

@media (max-width: 860px) { .dv-modal-pe .esq { display: none; } .dv-modal-pe { justify-content: stretch; } .dv-modal-pe .dv-btn { flex: 1; } }

/* O navegador controla cursor, seleção e composição dentro do editor. */
.dv-ed-area { -webkit-user-select: text; user-select: text; white-space: normal; overflow-wrap: anywhere; }