/* =====================================================================
   PRESTAÇÃO DE CONTAS
   Estilos do módulo. Usa SEMPRE var(--phoenix-*) (o tema não expõe --bs-*),
   garantindo dark mode nativo.
===================================================================== */

/* ---------- KPIs ---------- */
.doc-kpi-icone {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.doc-kpi-valor {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--phoenix-emphasis-color);
}


/* ---------- TAGS (input com chips) ---------- */
.doc-tags {
    min-height: calc(1.5em + 1rem + 2px);
    height: auto;
    cursor: text;
    gap: .35rem;
}

.doc-tags-input {
    outline: none;
    background: transparent;
    min-width: 140px;
    color: var(--phoenix-body-color);
}

.doc-tag {
    font-weight: 500;
}

.doc-tag .doc-tag-x {
    cursor: pointer;
    opacity: .7;
}
.doc-tag .doc-tag-x:hover { opacity: 1; }


/* ---------- DROPZONE ---------- */
.doc-dropzone {
    display: block;
    width: 100%;
    border: 2px dashed var(--phoenix-border-color);
    border-radius: .75rem;
    padding: 1.75rem 1rem;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
    background-color: var(--phoenix-body-bg);
    margin-bottom: 0;
}

.doc-dropzone:hover,
.doc-dropzone-hover {
    border-color: var(--phoenix-primary);
    background-color: var(--phoenix-primary-bg-subtle);
}

.doc-dropzone-icone {
    font-size: 2rem;
    color: var(--phoenix-primary);
    margin-bottom: .5rem;
}

.doc-dropzone-arquivo {
    display: flex;
    align-items: center;
    gap: .75rem;
    text-align: left;
}


/* ---------- DRAWER (offcanvas) ---------- */
.doc-drawer {
    --phoenix-offcanvas-width: 42rem;
    --bs-offcanvas-width: 42rem;
}
@media (max-width: 700px) {
    .doc-drawer {
        --phoenix-offcanvas-width: 100%;
        --bs-offcanvas-width: 100%;
    }
}

.doc-drawer-icone {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
    background-color: var(--phoenix-secondary-bg);
    color: var(--phoenix-primary);
}


/* ---------- LISTA DE INFORMAÇÕES ---------- */
.doc-info {
    display: grid;
    grid-template-columns: 1fr;
    gap: .1rem;
    margin: 0;
}

.doc-info-item {
    display: grid;
    grid-template-columns: 40% 60%;
    gap: .5rem;
    padding: .6rem 0;
    border-bottom: 1px solid var(--phoenix-border-color-translucent);
}

.doc-info-item dt {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--phoenix-secondary-color);
}

.doc-info-item dd {
    margin: 0;
    font-size: .875rem;
    color: var(--phoenix-body-color);
    word-break: break-word;
}


/* ---------- PRÉ-VISUALIZAÇÃO ---------- */
.doc-preview-frame {
    width: 100%;
    height: 65vh;
    border: 1px solid var(--phoenix-border-color);
    border-radius: .5rem;
}

.doc-preview-vazio {
    font-size: 2.5rem;
    color: var(--phoenix-tertiary-color);
}


/* ---------- TIMELINE (histórico) ---------- */
.doc-timeline {
    list-style: none;
    margin: 0;
    padding: .25rem 0 0 0;
    position: relative;
}

.doc-timeline-item {
    position: relative;
    display: flex;
    gap: .85rem;
    padding-bottom: 1.35rem;
}

/* linha vertical conectando os pontos */
.doc-timeline-item::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 32px;
    bottom: 0;
    width: 2px;
    background-color: var(--phoenix-border-color);
}
.doc-timeline-item:last-child::before { display: none; }

.doc-timeline-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    flex-shrink: 0;
    z-index: 1;
}

.doc-timeline-conteudo {
    padding-top: .15rem;
}

/* =====================================================================
   DEMANDAS — quadro, cartoes e timeline.
   Usa as variaveis do tema Phoenix (--phoenix-*) para acompanhar o modo
   claro/escuro sem duplicar paleta.
===================================================================== */

.dem-kpi { cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.dem-kpi:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.08) !important; }
.dem-kpi-valor { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.dem-kpi-rotulo { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
                  color: var(--phoenix-secondary-color); }

/* quadro: rolagem horizontal, colunas de largura fixa */
.dem-quadro { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: .75rem; align-items: flex-start; }
.dem-coluna { flex: 0 0 300px; max-width: 300px; background: var(--phoenix-body-highlight-bg);
              border-radius: .5rem; }
.dem-coluna-cabeca { display: flex; justify-content: space-between; align-items: center;
                     padding: .625rem .75rem; border-bottom: 2px solid; border-radius: .5rem .5rem 0 0; }
.dem-coluna-corpo { padding: .5rem; display: grid; gap: .5rem; max-height: 62vh; overflow-y: auto; }

.dem-cartao { display: block; background: var(--phoenix-card-bg); border: 1px solid var(--phoenix-border-color);
              border-radius: .375rem; padding: .625rem .75rem; text-decoration: none;
              color: inherit; transition: border-color .12s ease, box-shadow .12s ease; }
.dem-cartao:hover { border-color: var(--phoenix-primary); box-shadow: 0 .25rem .5rem rgba(0,0,0,.06); }
.dem-cartao-titulo { font-size: .8rem; font-weight: 600; margin-top: .25rem;
                     display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
                     overflow: hidden; }

.dem-descricao { white-space: pre-wrap; }

/* timeline */
.dem-timeline { position: relative; padding-left: 2.25rem; }
.dem-timeline::before { content: ""; position: absolute; left: .95rem; top: .25rem; bottom: .25rem;
                        width: 2px; background: var(--phoenix-border-color); }
.dem-evento { position: relative; padding-bottom: 1.25rem; }
.dem-evento:last-child { padding-bottom: 0; }
.dem-evento-marca { position: absolute; left: -2.25rem; top: 0; width: 1.9rem; height: 1.9rem;
                    border-radius: 50%; display: flex; align-items: center; justify-content: center;
                    font-size: .75rem; }
.dem-evento-corpo { background: var(--phoenix-body-highlight-bg); border-radius: .375rem;
                    padding: .5rem .75rem; }

@media (max-width: 575.98px) {
  .dem-coluna { flex-basis: 82vw; max-width: 82vw; }
  .dem-kpi-valor { font-size: 1.3rem; }
}

/* =====================================================================
   COR DO SETOR EXTERNO (migração 087)

   `sistema_setor.cor` guarda um NOME de cor, e a tela o usa para montar
   `badge-phoenix-<nome>` e `text-<nome>`. O setor Externo grava o nome
   `externo`, que o tema não conhece — as duas regras abaixo é que lhe dão
   cor. Sem elas o crachá sai sem estilo e nada quebra: é o mesmo
   comportamento tolerante do painel público da Pesquisa.

   ⚠️ POR QUE UMA COR NOVA E NÃO UMA DAS SEIS DO TEMA. Todas já têm dono
   ou significado firmado no módulo: primary é Compras, info é RH, warning
   é Jurídico, danger é Assistencial, dark é Coordenação; verde é
   concluído, cinza é "já passou" e vermelho é atraso. Reusar qualquer uma
   faria o crachá EXT dizer outra coisa — e ele precisa ser visto de
   relance no quadro, que é toda a razão de existir.

   ⚠️ ESTE ARQUIVO É CARREGADO EM TODA TELA INTERNA (`header-assets`), e é
   por isso que a cor vale igual na Central, no detalhe, nas Estatísticas
   e no Gerenciador de Setores, sem nenhuma delas saber que existe um
   setor externo.
===================================================================== */

.badge-phoenix-externo {
  --phoenix-badge-bg: #f5ecff;
  --phoenix-badge-color: #6b21a8;
  --phoenix-badge-border-color: #ddc2fb;
}
.text-externo { color: #7e22ce !important; }

[data-bs-theme=dark] .badge-phoenix-externo {
  --phoenix-badge-bg: #2b1152;
  --phoenix-badge-color: #ddc2fb;
  --phoenix-badge-border-color: #5b2ba6;
}
[data-bs-theme=dark] .text-externo { color: #c9a6f7 !important; }