/* Pessoas em lista completa (pes-) e seletor de pessoa e texto do compromisso (cmp-). js/views/capture-b.js e js/cap-links.js. */

/* lista completa de pessoas */
.pes-letras { display: flex; flex-wrap: wrap; gap: 4px; padding: 12px 16px 0; }
.pes-letra { min-width: 30px; height: 30px; padding: 0 8px; border: 1px solid var(--linha); border-radius: 8px; background: var(--painel); color: var(--tinta-2); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.pes-letra:hover:not(:disabled) { border-color: var(--marca-2); color: var(--marca-2); }
.pes-letra.ativo { background: var(--marca); border-color: var(--marca); color: var(--painel); }
.pes-letra:disabled { opacity: .35; cursor: default; }
.pes-letra:focus-visible { outline: 2px solid var(--marca-2); outline-offset: 1px; }
.pes-conta { margin-right: auto; font-size: 13px; color: var(--tinta-2); }
.pes-conta b { color: var(--tinta); }
.pes-pag { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--linha); }
.pes-pag .cb-nota:first-child { margin-right: auto; }
#pes-res .rolagem thead th { position: sticky; top: 0; background: var(--painel); z-index: 1; }

/* seletor de pessoa */
.cmp-combo { position: relative; display: block; }
.cmp-combo .campo { width: 100%; }
.cmp-pop { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; background: var(--painel); border: 1px solid var(--linha-forte); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .12); overflow: hidden; }
.cmp-pop[hidden] { display: none; }
.cmp-conta { display: block; padding: 6px 12px; font-size: 12px; color: var(--tinta-3); border-bottom: 1px solid var(--linha); }
.cmp-lista { list-style: none; margin: 0; padding: 4px 0; max-height: 280px; overflow-y: auto; }
.cmp-lista [role="option"] { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; padding: 7px 12px; cursor: pointer; font-size: 13.5px; font-weight: 400; color: var(--tinta); }
.cmp-lista [role="option"] b { font-weight: 500; }
.cmp-lista [role="option"] small { color: var(--tinta-3); font-size: 12px; text-align: right; }
.cmp-lista [role="option"]:hover, .cmp-lista [role="option"].ativo { background: var(--marca-suave); }
.cmp-lista [role="option"].ativo { box-shadow: inset 3px 0 0 var(--marca); }
.cmp-letra { padding: 6px 12px 2px; font-size: 11.5px; font-weight: 600; color: var(--latao); }
.cmp-nada { padding: 10px 12px; font-size: 13px; color: var(--tinta-2); }

/* texto do compromisso */
.cmp-rot { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; color: var(--tinta-2); }
.cmp-editor { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--linha); border-radius: 10px; background: var(--painel); }
.cmp-editor .cb-nota { margin: 0; }
.cmp-passos { margin: 0 0 10px; padding-left: 20px; display: grid; gap: 6px; font-size: 13.5px; }
.cmp-passos li::marker { color: var(--latao); font-weight: 600; }

@media (max-width: 800px) {
  .cmp-lista [role="option"] { flex-direction: column; gap: 0; }
  .cmp-lista [role="option"] small { text-align: left; }
}
#pes-res .tab td { white-space: nowrap; vertical-align: middle; }