/* =========================================================================
   Portal do fornecedor — credenciamento (SIGAC)
   Namespace: crd-
   Telas: /credenciamento/entrar, /cadastro, /meus-dados, /meus-documentos
   ========================================================================= */

.crd-page {
    --crd-azul: #004c99;
    --crd-azul-escuro: #003d80;
    --crd-amarelo: #f6be00;
    --crd-titulo: #1a2a40;
    --crd-borda: #e0e7f0;
    --crd-verde: #16a34a;
    --crd-texto: #47566b;
    --crd-fundo: #f6f8fb;

    background: var(--crd-fundo);
    padding: 24px 16px 56px;
    min-height: 60vh;
}

.crd-wrap { max-width: 1040px; margin: 0 auto; }
.crd-wrap--estreito { max-width: 520px; }

/* ── Cartão ──────────────────────────────────────────────────────────── */
.crd-card {
    background: #fff; border: 1px solid var(--crd-borda);
    border-radius: 14px; padding: 22px;
}
.crd-card + .crd-card { margin-top: 16px; }
.crd-card__titulo {
    font-size: 1rem; font-weight: 700; color: var(--crd-titulo);
    margin: 0 0 14px; display: flex; align-items: center; gap: 8px;
}

/* ── Formulário ──────────────────────────────────────────────────────── */
.crd-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.crd-grid .crd-full { grid-column: 1 / -1; }

.crd-campo label {
    display: block; font-size: .8rem; font-weight: 600;
    color: var(--crd-titulo); margin-bottom: 5px;
}
.crd-campo .form-control,
.crd-campo .form-select {
    border: 1px solid var(--crd-borda); border-radius: 8px;
    padding: 9px 12px; font-size: .92rem; width: 100%;
}
.crd-campo .form-control:focus,
.crd-campo .form-select:focus {
    border-color: var(--crd-azul);
    box-shadow: 0 0 0 3px rgba(0, 76, 153, .12);
    outline: none;
}
.crd-dica { font-size: .78rem; color: var(--crd-texto); margin: 5px 0 0; }
.crd-erro { font-size: .78rem; color: #dc2626; margin: 5px 0 0; display: block; }

/* ── Botões: sempre pílula, nunca sombra ─────────────────────────────── */
.crd-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border-radius: 999px; border: 1px solid transparent;
    padding: 10px 22px; font-size: .9rem; font-weight: 600;
    cursor: pointer; text-decoration: none;
    transition: transform .15s ease, filter .15s ease, background .15s ease;
}
.crd-btn:hover { transform: translateY(-2px); filter: brightness(1.06); text-decoration: none; }
.crd-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }

.crd-btn--primario {
    background: linear-gradient(135deg, #004c99, #0070d4); color: #fff;
}
.crd-btn--primario:hover { color: #fff; }
.crd-btn--secundario {
    background: #fff; color: var(--crd-azul); border-color: var(--crd-borda);
}
.crd-btn--perigo { background: #fff; color: #dc2626; border-color: #fecaca; }
.crd-btn--bloco { width: 100%; }
.crd-btn--pequeno { padding: 6px 14px; font-size: .8rem; }

.crd-acoes {
    display: flex; gap: 10px; flex-wrap: wrap;
    margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--crd-borda);
}

/* ── Avisos ──────────────────────────────────────────────────────────── */
.crd-aviso {
    border-radius: 10px; padding: 12px 14px; font-size: .88rem;
    margin-bottom: 16px; display: flex; gap: 10px; align-items: flex-start;
}
.crd-aviso--info { background: rgba(0, 76, 153, .07); color: #12406f; }
.crd-aviso--ok { background: rgba(22, 163, 74, .1); color: #14532d; }
.crd-aviso--atencao { background: rgba(246, 190, 0, .16); color: #7a5b00; }
.crd-aviso--erro { background: #fee2e2; color: #991b1b; }

/* ── Selo de situação ────────────────────────────────────────────────── */
.crd-selo {
    display: inline-flex; align-items: center; gap: 5px;
    border-radius: 6px; padding: 3px 9px;
    font-size: .74rem; font-weight: 700;
}
.crd-selo--ok { background: rgba(22, 163, 74, .12); color: #14532d; }
.crd-selo--espera { background: rgba(0, 76, 153, .1); color: #12406f; }
.crd-selo--atencao { background: rgba(246, 190, 0, .2); color: #7a5b00; }
.crd-selo--erro { background: #fee2e2; color: #991b1b; }

/* ── Lista de documentos ─────────────────────────────────────────────── */
.crd-doc-grupo + .crd-doc-grupo { margin-top: 22px; }
.crd-doc-grupo__titulo {
    font-size: .74rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .4px; color: var(--crd-texto); margin-bottom: 10px;
}

.crd-doc {
    display: flex; gap: 12px; align-items: flex-start;
    border: 1px solid var(--crd-borda); border-radius: 10px;
    padding: 14px; background: #fff;
}
.crd-doc + .crd-doc { margin-top: 10px; }
.crd-doc--pendente { border-style: dashed; background: #fcfdff; }
.crd-doc--vencido { border-color: #fecaca; background: #fff7f7; }
.crd-doc--vencendo { border-color: #fde68a; background: #fffdf5; }

.crd-doc__icone {
    width: 36px; height: 36px; flex-shrink: 0;
    border-radius: 8px; display: flex; align-items: center; justify-content: center;
    background: rgba(0, 76, 153, .08); color: var(--crd-azul);
}
.crd-doc__corpo { flex: 1; min-width: 0; }
.crd-doc__nome { font-weight: 600; font-size: .9rem; color: var(--crd-titulo); }
.crd-doc__meta { font-size: .78rem; color: var(--crd-texto); margin-top: 3px; }
.crd-doc__acoes { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; }

/* ── Painel de envio ─────────────────────────────────────────────────── */
.crd-envio { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--crd-borda); }
.crd-envio .crd-grid { gap: 10px; }

/* ── Resumo ──────────────────────────────────────────────────────────── */
.crd-resumo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.crd-resumo__item {
    border: 1px solid var(--crd-borda); border-radius: 10px;
    padding: 14px; background: #fff; text-align: center;
}
.crd-resumo__valor {
    font-size: 1.5rem; font-weight: 700; color: var(--crd-titulo);
    font-variant-numeric: tabular-nums;
}
.crd-resumo__rotulo { font-size: .76rem; color: var(--crd-texto); margin-top: 2px; }

.crd-dl { margin: 0; }
.crd-dl div { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; }
.crd-dl div + div { border-top: 1px solid var(--crd-borda); }
.crd-dl dt { font-size: .82rem; color: var(--crd-texto); font-weight: 500; margin: 0; }
.crd-dl dd { font-size: .88rem; color: var(--crd-titulo); font-weight: 600; margin: 0; text-align: right; }

/* ── Mobile ──────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .crd-page { padding: 16px 12px 40px; }
    .crd-card { padding: 16px; border-radius: 12px; }
    .crd-grid { grid-template-columns: 1fr; }
    .crd-resumo { grid-template-columns: 1fr; }
    .crd-doc { flex-wrap: wrap; }
    .crd-doc__acoes { width: 100%; }
    .crd-doc__acoes .crd-btn { flex: 1; }
    .crd-acoes .crd-btn { flex: 1; }
    .crd-dl div { flex-direction: column; gap: 2px; }
    .crd-dl dd { text-align: left; }
}

/* ── Trilha de acompanhamento da inscrição ───────────────────────────── */
.crd-trilha {
    list-style: none; margin: 18px 0 0; padding: 0;
    display: flex; gap: 6px; flex-wrap: wrap;
}
.crd-trilha__passo {
    flex: 1; min-width: 120px;
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px; border-radius: 10px;
    border: 1px solid var(--crd-borda); background: #fff;
}
.crd-trilha__marca {
    width: 24px; height: 24px; flex-shrink: 0;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: .74rem; font-weight: 700;
    background: #eef2f7; color: #8a99ad;
}
.crd-trilha__rotulo { font-size: .8rem; font-weight: 600; color: var(--crd-texto); }

.crd-trilha__passo.is-feito { border-color: rgba(22, 163, 74, .35); background: rgba(22, 163, 74, .06); }
.crd-trilha__passo.is-feito .crd-trilha__marca { background: var(--crd-verde); color: #fff; }
.crd-trilha__passo.is-feito .crd-trilha__rotulo { color: #14532d; }

.crd-trilha__passo.is-atual { border-color: var(--crd-azul); background: rgba(0, 76, 153, .05); }
.crd-trilha__passo.is-atual .crd-trilha__marca { background: var(--crd-azul); color: #fff; }
.crd-trilha__passo.is-atual .crd-trilha__rotulo { color: var(--crd-azul); }

/* ── Descrição do edital, vinda do editor de texto ───────────────────── */
.crd-texto-html { font-size: .92rem; line-height: 1.7; color: var(--crd-texto); }
.crd-texto-html p, .crd-texto-html ul, .crd-texto-html ol { margin-bottom: .75rem; }
.crd-texto-html > :last-child { margin-bottom: 0; }
.crd-texto-html img { max-width: 100%; height: auto; }
.crd-texto-html table { max-width: 100%; }

@media (max-width: 767px) {
    .crd-trilha { flex-direction: column; }
    .crd-trilha__passo { min-width: 0; }
}


/* ═══════════════════════════════════════════════════════════════════════
   Página de detalhe do edital

   Segue o desenho da tela de edital do site (institucional.css, namespace
   ps-): caixas de dados e seções tituladas. O topo (caminho, situação,
   ação) é o cabeçalho único do site (_PageHeader). Mantém o que é do
   credenciamento — botão pílula, lista de documentos exigidos.

   As classes são recriadas aqui em vez de reusar as ps-: aquela folha é
   do institucional e muda por motivos que nada têm a ver com este fluxo.
   Reusar amarraria o portal do fornecedor a cada ajuste de lá.
   ═══════════════════════════════════════════════════════════════════════ */

/* Fundo branco só nesta página. As outras telas do portal seguem com o
   cinza claro, que ajuda a separar cartão de formulário. Aqui o conteúdo é
   documento, e documento se lê melhor sobre branco. */
.crd-page--detalhe { background: #fff; }

/* "Enviar documentação" é POST (antiforgery) e não cabe nas ações do
   cabeçalho da página, que só levam link: fica no topo do conteúdo. */
.crd-participar { margin: 0 0 16px; }

/* ── Caixas de dados ─────────────────────────────────────────────────── */
.crd-meta {
    display: grid; gap: 12px; margin-bottom: 26px;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.crd-meta__item {
    background: #f5f7fa; border: 1px solid #e4e8ef;
    border-radius: 10px; padding: 12px 15px;
}
.crd-meta__item label {
    display: flex; align-items: center; gap: 6px;
    font-size: .72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em;
    color: #888; margin: 0 0 4px;
}
.crd-meta__item label i { color: var(--crd-azul); }
.crd-meta__item span {
    display: block; font-size: .95rem; font-weight: 600; color: #222;
}

/* ── Seção titulada ──────────────────────────────────────────────────── */
.crd-secao { margin-bottom: 30px; }
.crd-secao__titulo {
    display: flex; align-items: center; gap: 7px;
    font-size: .9rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--crd-azul);
    border-bottom: 2px solid var(--crd-borda);
    padding-bottom: 7px; margin: 0 0 14px;
}

/* ── Anexos como fichas ──────────────────────────────────────────────── */
/* Ficha larga e clicável inteira, e não link de texto: quem abre isto no
   celular está com o dedo, não com o mouse. */
.crd-arquivos { display: flex; flex-wrap: wrap; gap: 10px; }
.crd-arquivo {
    display: inline-flex; align-items: center; gap: 8px;
    max-width: 100%;
    padding: 10px 16px;
    border: 1px solid var(--crd-borda); border-radius: 8px;
    background: #fff; color: var(--crd-azul);
    font-size: .88rem; font-weight: 600; text-decoration: none;
    transition: border-color .15s, transform .15s, background .15s;
}
.crd-arquivo:hover {
    border-color: var(--crd-azul); background: #f7faff;
    transform: translateY(-1px); text-decoration: none;
}
.crd-arquivo > span {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Contador do grupo de documentos ─────────────────────────────────── */
.crd-doc-grupo__conta {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 6px; margin-left: 6px;
    border-radius: 999px; background: var(--crd-borda);
    color: var(--crd-texto); font-size: .7rem; font-weight: 700;
}

@media (max-width: 640px) {
    .crd-participar .crd-btn { width: 100%; }
    .crd-arquivo { width: 100%; }
}