/* =====================================================================
   OBRA365 — CSS de marca do app core (referência dos tokens para Portal e Suporte).
   Base: Manual de Identidade Visual v1.2 + 01 Marca/Estilo css/estilo.css.
   Carregar DEPOIS do bootstrap.min.css: sobrescreve as variáveis --bs-*.
   Regras: fundo creme (nunca branco puro), Bitter nos títulos/números, Karla na interface,
   botões pílula, cards arredondados com sombra bem leve e borda na cor "linha".
   ===================================================================== */

/* ---------- 1. Tokens da marca ---------- */
:root {
    --tinta: #241C15;
    --suave: #3A332C;
    --telha: #A8432A;
    --telha-c: #C4693F;
    --creme: #F7F2E9;
    --creme-e: #FBF4EE;
    --areia: #8A7B69;
    --areia-c: #B8A894;
    --linha: #D6C9B4;
    --oliva: #5B6B4A;
    --pessego: #E0A882;

    --serif: 'Bitter', Georgia, serif;
    --sans: 'Karla', system-ui, sans-serif;

    --raio-card: 12px;
    --sombra-leve: 0 1px 2px rgba(36, 28, 21, .05), 0 2px 8px rgba(36, 28, 21, .04);
    --largura-sidebar: 264px;

    /* Semáforo da obra */
    --verde: var(--oliva);
    --amarelo: #C9962E;
    --vermelho: var(--telha);
}

/* ---------- 2. Sobrescrita das variáveis do Bootstrap ---------- */
:root {
    --bs-body-bg: var(--creme);
    --bs-body-bg-rgb: 247, 242, 233;
    --bs-body-color: var(--suave);
    --bs-body-color-rgb: 58, 51, 44;
    --bs-body-font-family: var(--sans);
    --bs-body-font-size: 1rem;
    --bs-body-line-height: 1.6;
    --bs-emphasis-color: var(--tinta);
    --bs-secondary-color: var(--areia);
    --bs-tertiary-bg: var(--creme-e);
    --bs-heading-color: var(--tinta);

    --bs-primary: var(--telha);
    --bs-primary-rgb: 168, 67, 42;
    --bs-secondary: var(--areia);
    --bs-secondary-rgb: 138, 123, 105;
    --bs-success: var(--oliva);
    --bs-success-rgb: 91, 107, 74;
    --bs-danger: var(--telha);
    --bs-danger-rgb: 168, 67, 42;
    --bs-warning: var(--amarelo);
    --bs-warning-rgb: 201, 150, 46;
    --bs-dark: var(--tinta);
    --bs-dark-rgb: 36, 28, 21;

    --bs-link-color: var(--telha);
    --bs-link-color-rgb: 168, 67, 42;
    --bs-link-hover-color: var(--telha-c);
    --bs-link-hover-color-rgb: 196, 105, 63;

    --bs-border-color: var(--linha);
    --bs-border-radius: 8px;
    --bs-border-radius-lg: var(--raio-card);
    --bs-focus-ring-color: rgba(168, 67, 42, .25);
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .serif {
    font-family: var(--serif);
    font-weight: 500;
    color: var(--tinta);
}

/* Rótulo em caixa alta (kicker) usado nos livros */
.kicker {
    font-family: var(--sans);
    font-weight: 700;
    font-size: .75rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--telha);
}

.filete {
    display: inline-block;
    width: 22px;
    height: 3px;
    background: var(--telha);
    vertical-align: middle;
}

/* ---------- 3. Botões pílula ---------- */
.btn {
    --bs-btn-border-radius: 999px;
    --bs-btn-padding-x: 1.25rem;
    --bs-btn-font-family: var(--sans);
    --bs-btn-font-weight: 700;
}

.btn-sm { --bs-btn-border-radius: 999px; --bs-btn-padding-x: .9rem; }
.btn-lg { --bs-btn-border-radius: 999px; --bs-btn-padding-x: 1.6rem; }

.btn-primary {
    --bs-btn-bg: var(--telha);
    --bs-btn-border-color: var(--telha);
    --bs-btn-color: var(--creme);
    --bs-btn-hover-bg: var(--telha-c);
    --bs-btn-hover-border-color: var(--telha-c);
    --bs-btn-hover-color: var(--creme);
    --bs-btn-active-bg: #8F3823;
    --bs-btn-active-border-color: #8F3823;
    --bs-btn-disabled-bg: var(--areia-c);
    --bs-btn-disabled-border-color: var(--areia-c);
    --bs-btn-focus-shadow-rgb: 168, 67, 42;
}

.btn-outline-primary {
    --bs-btn-color: var(--telha);
    --bs-btn-border-color: var(--telha);
    --bs-btn-hover-bg: var(--telha);
    --bs-btn-hover-border-color: var(--telha);
    --bs-btn-hover-color: var(--creme);
    --bs-btn-active-bg: #8F3823;
    --bs-btn-active-border-color: #8F3823;
    --bs-btn-disabled-color: var(--areia);
    --bs-btn-disabled-border-color: var(--areia-c);
    --bs-btn-focus-shadow-rgb: 168, 67, 42;
}

.btn-outline-secondary {
    --bs-btn-color: var(--suave);
    --bs-btn-border-color: var(--linha);
    --bs-btn-hover-bg: var(--creme-e);
    --bs-btn-hover-border-color: var(--areia-c);
    --bs-btn-hover-color: var(--tinta);
    --bs-btn-active-bg: var(--linha);
    --bs-btn-active-border-color: var(--areia-c);
    --bs-btn-active-color: var(--tinta);
}

.btn-danger {
    --bs-btn-bg: var(--telha);
    --bs-btn-border-color: var(--telha);
    --bs-btn-hover-bg: #8F3823;
    --bs-btn-hover-border-color: #8F3823;
}

/* ---------- 4. Cards, formulários, tabelas ---------- */
.card {
    --bs-card-bg: var(--creme-e);
    --bs-card-border-color: var(--linha);
    --bs-card-border-radius: var(--raio-card);
    --bs-card-inner-border-radius: calc(var(--raio-card) - 1px);
    --bs-card-cap-bg: transparent;
    box-shadow: var(--sombra-leve);
}

.form-control, .form-select {
    background-color: #FFFDF9;
    border-color: var(--linha);
}

.form-control:focus, .form-select:focus {
    border-color: var(--telha-c);
    box-shadow: 0 0 0 .2rem rgba(168, 67, 42, .15);
}

.form-label { font-weight: 700; color: var(--tinta); }

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--suave);
    --bs-table-border-color: var(--linha);
    --bs-table-hover-bg: rgba(224, 168, 130, .14);
}

.table > thead th {
    font-size: .8rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--areia);
    border-bottom-width: 2px;
}

/* Linha clicável das listas (leva à edição) */
tr[data-href] { cursor: pointer; }

.numero { font-family: var(--serif); font-variant-numeric: tabular-nums; }

/* ---------- 5. Caixas editoriais do livro ---------- */
.caixa-dica, .caixa-alerta {
    background: var(--creme-e);
    border-left: 3px solid var(--telha);
    border-radius: 0 8px 8px 0;
    padding: .9rem 1.1rem;
    margin: 1rem 0;
}

.caixa-dica .rotulo, .caixa-alerta .rotulo {
    display: block;
    font-weight: 700;
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--telha);
    margin-bottom: .3rem;
}

.caixa-dica p:last-child, .caixa-alerta p:last-child { margin-bottom: 0; }

/* ---------- 6. Semáforo Verde / Amarelo / Vermelho ---------- */
.semaforo {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-weight: 700;
    border-radius: 999px;
    padding: .25rem .8rem;
    font-size: .85rem;
    background: var(--creme-e);
    border: 1px solid var(--linha);
}

.semaforo::before {
    content: '';
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
    background: var(--areia-c);
}

.semaforo-verde::before { background: var(--verde); }
.semaforo-amarelo::before { background: var(--amarelo); }
.semaforo-vermelho::before { background: var(--vermelho); }

/* ---------- 7. Layout: sidebar fixa + conteúdo ---------- */
.icone {
    width: 1.1em;
    height: 1.1em;
    fill: currentColor;
    vertical-align: -.15em;
    flex-shrink: 0;
}

.app-topo {
    background: var(--creme);
    border-bottom: 1px solid var(--linha);
}

/* Obra ativa em destaque no topo de todas as páginas */
.obra-ativa-destaque {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
    padding: .35rem 1rem .35rem .8rem;
    border-radius: 999px;
    background: var(--creme-e);
    border: 1px solid var(--linha);
    border-left: 4px solid var(--telha);
    color: var(--tinta);
    text-decoration: none;
}
.obra-ativa-destaque:hover { border-color: var(--telha-c); color: var(--tinta); }
.obra-ativa-destaque > .icone { color: var(--telha); font-size: 1.25rem; }
.obra-ativa-textos { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.obra-ativa-rotulo {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--areia);
}
.obra-ativa-nome {
    font-family: var(--serif);
    font-weight: 700;
    font-size: 1.05rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 22rem;
}
@media (max-width: 575.98px) {
    .obra-ativa-nome { max-width: 9rem; font-size: .95rem; }
}

.app-sidebar {
    --bs-offcanvas-width: var(--largura-sidebar);
    --bs-offcanvas-bg: var(--tinta);
    --bs-offcanvas-color: var(--creme);
    background: var(--tinta);
    color: var(--creme);
}

.app-sidebar .marca img { width: 150px; height: auto; }

.app-sidebar .rotulo-secao {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--areia-c);
    padding: 0 .75rem;
    margin: 1.25rem 0 .4rem;
}

.app-sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: .7rem;
    color: var(--creme);
    border-radius: 999px;
    padding: .5rem .9rem;
    font-weight: 500;
}

.app-sidebar .nav-link:hover { background: rgba(247, 242, 233, .08); color: var(--creme); }

.app-sidebar .nav-link.active {
    background: var(--telha);
    color: var(--creme);
}

.app-sidebar .nav-link.disabled { color: var(--areia); opacity: .8; }

.app-sidebar .nav-link { min-width: 0; }

.app-sidebar .rotulo-link {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

/* Módulo ainda não liberado: linha pequena abaixo do rótulo */
.app-sidebar .selo-em-breve {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--areia);
}

.app-sidebar .seletor-obra .form-select {
    background-color: var(--suave);
    color: var(--creme);
    border-color: #4A3D31;
    border-radius: 999px;
}

.app-sidebar .seletor-obra label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--areia-c);
}

.app-conteudo { min-width: 0; }

@media (min-width: 992px) {
    /* o .offcanvas-lg do Bootstrap zera o fundo acima de lg com !important */
    .app-sidebar.offcanvas-lg,
    .app-sidebar.offcanvas-lg .offcanvas-body {
        background-color: var(--tinta) !important;
    }

    /* idem para a largura (width:auto !important) e o crescimento (flex-grow:1) */
    .app-sidebar.offcanvas-lg {
        position: sticky;
        top: 0;
        height: 100vh !important;
        width: var(--largura-sidebar) !important;
        flex: 0 0 var(--largura-sidebar);
        overflow-x: hidden;
        overflow-y: auto;
    }

    .app-sidebar.offcanvas-lg .offcanvas-body {
        flex-grow: 1;
        width: 100%;
    }
}

/* ---------- 8. DataTables na marca ---------- */
div.dt-container .dt-search input {
    border-radius: 999px;
    padding-left: .9rem;
    min-width: 240px;
}

div.dt-container .pagination {
    --bs-pagination-color: var(--telha);
    --bs-pagination-active-bg: var(--telha);
    --bs-pagination-active-border-color: var(--telha);
    --bs-pagination-border-color: var(--linha);
    --bs-pagination-bg: transparent;
    --bs-pagination-hover-bg: var(--creme-e);
    --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(168, 67, 42, .15);
}

/* ---------- 9. Mensagens, listas e navegação ---------- */
.alert { border-radius: 10px; }

.alert-success {
    --bs-alert-bg: rgba(91, 107, 74, .12);
    --bs-alert-color: #3F4B33;
    --bs-alert-border-color: rgba(91, 107, 74, .35);
}

.alert-warning {
    --bs-alert-bg: rgba(201, 150, 46, .12);
    --bs-alert-color: #6E5214;
    --bs-alert-border-color: rgba(201, 150, 46, .4);
}

.alert-danger {
    --bs-alert-bg: rgba(168, 67, 42, .1);
    --bs-alert-color: #7A2F1D;
    --bs-alert-border-color: rgba(168, 67, 42, .35);
}

.list-group {
    --bs-list-group-bg: transparent;
    --bs-list-group-border-color: var(--linha);
    --bs-list-group-action-hover-bg: rgba(224, 168, 130, .14);
    --bs-list-group-action-active-bg: rgba(224, 168, 130, .24);
    --bs-list-group-color: var(--suave);
    --bs-list-group-action-color: var(--suave);
    --bs-list-group-action-hover-color: var(--tinta);
}

.lista-configuracoes .list-group-item { padding-left: .25rem; padding-right: .25rem; }

.breadcrumb {
    --bs-breadcrumb-divider-color: var(--areia-c);
    --bs-breadcrumb-item-active-color: var(--areia);
}
.breadcrumb .icone { vertical-align: -.125em; margin-right: .3rem; }
/* Caminho no celular: só o nível de cima, como "voltar". */
.caminho-voltar {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--suave);
    text-decoration: none;
}
.caminho-voltar:hover { color: var(--telha); }

.invalid-feedback { color: var(--telha); }
.form-control.is-invalid { border-color: var(--telha); }

.tela-login { min-height: 100vh; }

/* ---------- 10. Jornada: trilho de processos e barra curta de etapas ---------- */
.trilho {
    display: flex;
    gap: .25rem;
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    overflow-x: auto;
}

.trilho-passo {
    flex: 1 1 0;
    min-width: 5.5rem;
    position: relative;
    text-align: center;
}

/* linha que liga um marco ao próximo */
.trilho-passo:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 1rem;
    left: calc(50% + 1.1rem);
    right: calc(-50% + 1.1rem);
    height: 2px;
    background: var(--linha);
}

.trilho-passo.passo-concluido:not(:last-child)::after { background: var(--oliva); }

.trilho-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    color: var(--suave);
    text-decoration: none;
    font-size: .8rem;
    line-height: 1.2;
}

a.trilho-link:hover { color: var(--telha); }

.trilho-marco {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 2px solid var(--linha);
    background: var(--creme-e);
    font-family: var(--serif);
    font-weight: 600;
}

.passo-concluido .trilho-marco { background: var(--oliva); border-color: var(--oliva); color: var(--creme); }
.passo-em-andamento .trilho-marco { border-color: var(--telha); color: var(--telha); }
.passo-em-andamento .trilho-titulo { color: var(--tinta); font-weight: 700; }

.barra-segmentos {
    display: flex;
    gap: .3rem;
}

.barra-segmento {
    flex: 1 1 0;
    height: .55rem;
    border-radius: 999px;
    background: var(--linha);
}

.barra-segmento.passo-concluido { background-color: var(--oliva); }
/* Cada etapa: o segmento e o nome embaixo. A etapa clicável é um link com área de clique maior
   que a barra fina. */
.barra-passo {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .45rem;
    color: var(--areia);
    text-decoration: none;
}
.barra-passo .barra-segmento { flex: 0 0 auto; }
a.barra-passo-link { padding-top: .55rem; margin-top: -.55rem; cursor: pointer; color: var(--suave); }
a.barra-passo-link:hover .barra-segmento { filter: brightness(.82); }
a.barra-passo-link:hover .barra-rotulo { color: var(--telha); text-decoration: underline; }
a.barra-passo-link:focus-visible { outline: 2px solid var(--telha); outline-offset: 2px; border-radius: 4px; }
.barra-rotulo { font-size: .78rem; line-height: 1.25; overflow-wrap: anywhere; }
.barra-passo-atual .barra-rotulo { color: var(--tinta); font-weight: 700; }
@media (max-width: 575.98px) {
    .barra-rotulo { display: none; }
}
.barra-segmento.barra-segmento-atual:not(.passo-concluido) { background-color: var(--pessego); }

.barra-etapa-atual {
    font-family: var(--serif);
    font-weight: 500;
    color: var(--tinta);
}

/* ---------- 11. Ficha da obra, seletor e ajustes de formulário ---------- */
.caixa-dica, .caixa-alerta { max-width: 46rem; }

.input-group-text {
    background: var(--creme-e);
    border-color: var(--linha);
    color: var(--areia);
}

.btn-outline-danger {
    --bs-btn-color: var(--telha);
    --bs-btn-border-color: var(--telha);
    --bs-btn-hover-bg: var(--telha);
    --bs-btn-hover-border-color: var(--telha);
    --bs-btn-hover-color: var(--creme);
    --bs-btn-active-bg: #8F3823;
    --bs-btn-active-border-color: #8F3823;
    --bs-btn-focus-shadow-rgb: 168, 67, 42;
}

.modal {
    --bs-modal-bg: var(--creme);
    --bs-modal-border-color: var(--linha);
    --bs-modal-border-radius: var(--raio-card);
}

.selo-ativa {
    background: rgba(91, 107, 74, .15);
    color: #3F4B33;
    font-weight: 700;
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.app-sidebar .link-nova-obra {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-top: .4rem;
    font-size: .8rem;
    color: var(--pessego);
    text-decoration: none;
}

.app-sidebar .link-nova-obra:hover { color: var(--creme); }

.app-sidebar .seletor-obra .form-select:disabled { opacity: .7; }

/* Modelos de contratação (caixas de marcar em "pílula") */
.modelos-contratacao .form-check {
    border: 1px solid var(--linha);
    border-radius: 999px;
    padding: .35rem .9rem .35rem 2.1rem;
    background: #FFFDF9;
}

.modelos-contratacao .form-check:has(.form-check-input:checked) {
    border-color: var(--telha-c);
    background: rgba(224, 168, 130, .14);
}

.form-check-input:checked {
    background-color: var(--telha);
    border-color: var(--telha);
}

/* ---------- 12. Módulo Do Projeto ao Custo ---------- */
.painel-numeros { position: sticky; top: 1rem; }

.numeros-lista { display: grid; grid-template-columns: 1fr auto; gap: .2rem .75rem; align-items: baseline; }
.numeros-lista dt { font-weight: 400; color: var(--suave); font-size: .9rem; }
.numeros-lista dd { margin: 0; text-align: right; color: var(--tinta); }
.numeros-lista .numero { font-size: 1.05rem; }
.numeros-lista .sub { grid-column: 1 / -1; font-size: .78rem; color: var(--areia); text-align: right; margin-top: -.15rem; }
.numeros-lista dt.sub { text-align: left; grid-column: 1; margin-top: 0; }
.numeros-lista dt.sub + dd.sub { grid-column: 2; margin-top: 0; }

.valor-calculado {
    font-size: 1.25rem;
    padding: .35rem .9rem;
    border-radius: 8px;
    background: var(--creme-e);
    border: 1px dashed var(--linha);
}

.cartao-processo .barra-segmento { height: .4rem; }
.cartao-em-breve { opacity: .65; }

.escolha-cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .75rem; }
.escolha-cartao {
    display: block;
    border: 1px solid var(--linha);
    border-radius: var(--raio-card);
    padding: .9rem 1rem .9rem 2.5rem;
    position: relative;
    background: #FFFDF9;
    cursor: pointer;
}
.escolha-cartao .form-check-input { position: absolute; left: 1rem; top: 1.05rem; }
.escolha-cartao:has(.form-check-input:checked) { border-color: var(--telha-c); background: rgba(224, 168, 130, .14); }

.lista-projetos .item-projeto { padding: .6rem 0; border-bottom: 1px solid var(--linha); }
.lista-projetos .item-projeto:last-child { border-bottom: 0; }

.alerta-calc {
    display: inline-block;
    font-size: .78rem;
    font-weight: 700;
    border-radius: 999px;
    padding: .15rem .7rem;
    line-height: 1.4;
}
.alerta-ok { background: rgba(91, 107, 74, .14); color: #3F4B33; }
/* Informativo é nota, não selo: texto discreto, sem pílula (mensagens longas da planilha) */
.alerta-calc.alerta-info { background: none; border: 0; border-radius: 0; padding: 0; font-weight: 400; font-style: italic; color: var(--areia); }
.alerta-conferir { background: rgba(201, 150, 46, .16); color: #6E5214; }
.alerta-alerta, .alerta-vermelho { background: rgba(168, 67, 42, .12); color: #7A2F1D; }

.faixas dt { font-weight: 400; }
.referencia-cub { color: var(--oliva); }

/* Checklist: três estados por item (ok / pendente / não se aplica) */
.checklist-item { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; padding: .55rem 0; border-bottom: 1px solid var(--linha); }
.checklist-item:last-child { border-bottom: 0; }
.checklist-item .texto { flex: 1 1 18rem; }
.checklist-respostas .btn { --bs-btn-padding-x: .7rem; --bs-btn-padding-y: .15rem; font-size: .8rem; }

/* Ficha da obra: selo da situação de cada etapa e lista de dados do resumo */
.selo-etapa {
    display: inline-block;
    padding: .15rem .6rem;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: var(--creme-e);
    border: 1px solid var(--linha);
    color: var(--suave);
}
.selo-etapa.passo-concluido { background: rgba(91, 107, 74, .15); border-color: transparent; color: #3F4B33; }
.selo-etapa.passo-em-andamento { background: rgba(224, 168, 130, .3); border-color: transparent; color: var(--tinta); }

.ficha-dados {
    display: grid;
    grid-template-columns: minmax(8rem, 40%) 1fr;
    gap: .35rem 1rem;
}
.ficha-dados dt { font-weight: 400; color: var(--suave); font-size: .9rem; }
.ficha-dados dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
@media (max-width: 575.98px) {
    .ficha-dados { grid-template-columns: 1fr; gap: 0; }
    .ficha-dados dd { margin-bottom: .5rem; }
}

/* Jornada O DONO: mapa das 12 fases, cartões de fase e próximo passo */
.cartao-proximo { border-left: 4px solid var(--telha); }

.mapa-fases { display: grid; gap: 1rem; }
@media (min-width: 992px) { .mapa-fases { grid-template-columns: 1fr 1fr; } }
.col-xl-4 .mapa-fases { grid-template-columns: 1fr; margin-top: 1.5rem; }
.mapa-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.mapa-fase {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .45rem .75rem;
    border: 1px solid var(--linha);
    border-radius: 999px;
    background: var(--creme-e);
    color: var(--tinta);
    text-decoration: none;
    font-size: .92rem;
}
.mapa-fase:hover { border-color: var(--telha-c); color: var(--tinta); }
.mapa-fase.mapa-fase-em-breve { color: var(--areia); }
.mapa-fase.mapa-fase-atual { border-color: var(--telha); box-shadow: 0 0 0 1px var(--telha) inset; font-weight: 700; }
.mapa-numero {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--telha);
    color: var(--creme);
    font-family: var(--serif);
    font-weight: 700;
    font-size: .85rem;
}
.mapa-fase-em-breve .mapa-numero { background: var(--areia-c); }
.mapa-fase.passo-concluido .mapa-numero { background: var(--oliva); }

.bloco-jornada { border-bottom: 2px solid var(--telha); padding-bottom: .5rem; }
.cartao-fase-atual { border-color: var(--telha); box-shadow: 0 0 0 1px var(--telha) inset, var(--sombra-leve); }
.selo-etapa.selo-em-breve-fase { color: var(--areia); }
.caixa-fase {
    background: var(--creme-e);
    border: 1px solid var(--linha);
    border-radius: var(--raio-card);
    padding: 1rem 1.25rem;
}

/* Área máxima calculada (Briefing Duro, etapa 2) */
.caixa-area-maxima {
    padding: .75rem 1rem;
    border-radius: 8px;
    background: var(--creme-e);
    border-left: 3px solid var(--telha);
}

/* Kits de Contratação para baixar */
.cartao-kit-escolhido { border-color: var(--oliva); box-shadow: 0 0 0 1px var(--oliva); }
.lista-arquivos li + li { margin-top: .35rem; }
.lista-arquivos a { display: inline-flex; align-items: center; gap: .4rem; }

/* Botão "?" ao lado do rótulo do campo e o popup com a ajuda */
.duvida {
    display: inline-flex;
    align-items: center;
    margin-left: .3rem;
    color: var(--areia);
    cursor: pointer;
    vertical-align: -.1em;
    border-radius: 999px;
}
.duvida:hover, .duvida:focus-visible { color: var(--telha); }
.duvida:focus-visible { outline: 2px solid var(--telha); outline-offset: 2px; }
.duvida .icone { font-size: 1.05rem; }
.popover-duvida {
    --bs-popover-bg: var(--creme-e);
    --bs-popover-border-color: var(--linha);
    --bs-popover-header-bg: var(--creme-e);
    --bs-popover-header-color: var(--telha);
    --bs-popover-body-color: var(--suave);
    --bs-popover-max-width: 22rem;
    border-left: 3px solid var(--telha);
    box-shadow: 0 6px 18px rgba(36, 28, 21, .12);
}
.popover-duvida .popover-header {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    border-bottom: 0;
    padding-bottom: 0;
}
.popover-duvida .popover-body { font-size: .9rem; line-height: 1.45; }

/* Documentos: lista de anexos, botão de anexar e lista de conferência */
.lista-anexos { list-style: none; padding: 0; margin: 0 0 .6rem; }
.lista-anexos li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .6rem;
    padding: .35rem 0;
    border-bottom: 1px dashed var(--linha);
}
.lista-anexos li > .icone { color: var(--telha); }
.anexo-nome { overflow-wrap: anywhere; }
.anexo-info { font-size: .8rem; color: var(--areia); }
.anexo-excluir { margin-left: auto; color: var(--areia); padding: 0 .25rem; }
.anexo-excluir:hover { color: var(--telha); }
.botao-anexar { cursor: pointer; }
.botao-anexar:focus-within { outline: 2px solid var(--telha); outline-offset: 2px; }
.botao-anexar.enviando { opacity: .6; pointer-events: none; }
.progresso-documentos { height: .55rem; background: var(--linha); border-radius: 999px; }
.progresso-documentos .progress-bar { background: var(--oliva); }
.lista-itens-documento { list-style: none; padding: 0; margin: 0; }
.item-documento { display: flex; gap: .8rem; padding: 1rem 0; border-top: 1px solid var(--linha); }
.item-situacao {
    flex: 0 0 1.6rem;
    height: 1.6rem;
    border-radius: 999px;
    border: 2px solid var(--linha);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: .1rem;
}
.item-pronto .item-situacao { border-color: var(--oliva); background: var(--oliva); color: var(--creme); }
.item-corpo { flex: 1 1 auto; min-width: 0; }
.aviso-pdf { color: var(--telha); }

/* Custo dos Projetos: projeto incluído no serviço e resumo agrupado */
.bloco-incluido { border-top: 1px dashed var(--linha); padding-top: .5rem; margin-top: .25rem; }
.linha-incluida td { background: var(--creme); }
.linha-incluida td:first-child { padding-left: 1.5rem; }
.seta-incluida { color: var(--areia); margin-right: .25rem; }
.arquivos-projeto { padding: 1rem 0; border-top: 1px solid var(--linha); }
.arquivos-projeto:first-of-type { border-top: 0; }

/* ---------- Documentos: espaços de anexo previstos (um por projeto, um por contratado) ---------- */
.espacos-anexos { border-top: 1px solid var(--linha); }
.espaco-anexos { border-bottom: 1px solid var(--linha); }
.espaco-anexos > summary {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .7rem 0;
    cursor: pointer;
    list-style: none;
}
.espaco-anexos > summary::-webkit-details-marker { display: none; }
.espaco-anexos > summary::before {
    content: "";
    width: .5rem;
    height: .5rem;
    border-right: 2px solid var(--areia);
    border-bottom: 2px solid var(--areia);
    flex: none;
    transform: rotate(-45deg);
    transition: transform .15s;
}
.espaco-anexos[open] > summary::before { transform: rotate(45deg); }
.espaco-titulo { flex: 1; min-width: 0; font-weight: 600; color: var(--tinta); }
.espaco-resumo { flex: none; font-size: .875rem; color: var(--oliva); white-space: nowrap; }
.espaco-resumo.espaco-vazio { color: var(--areia); }
.espaco-corpo { padding: 0 0 1rem 1.25rem; }

/* ---------- Kits de Contratação e contratações ---------- */
.cartao-link { color: inherit; text-decoration: none; transition: border-color .15s; }
.cartao-link:hover, .cartao-link:focus-visible { border-color: var(--telha); color: inherit; }
.cartao-link h2 { color: var(--tinta); }
.lista-documentos-kit { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--linha); }
.lista-documentos-kit li {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .7rem 0;
    border-bottom: 1px solid var(--linha);
}
.lista-documentos-kit li > .icone { flex: none; color: var(--telha); font-size: 1.15rem; }
.documento-kit-titulo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.documento-kit-numero { font-size: .75rem; color: var(--areia); text-transform: uppercase; letter-spacing: .04em; }
.lista-documentos-lado li { display: flex; gap: .4rem; align-items: baseline; padding: .15rem 0; }
.contratacao-anexos { padding: .5rem 0 .75rem; margin-bottom: .75rem; border-bottom: 1px dashed var(--linha); }

/* ---------- Formulários dos kits (ficha e checklist numa contratação) ---------- */
.form-kit .secao-formulario { margin: 1.75rem 0 .75rem; padding-bottom: .35rem; border-bottom: 1px solid var(--linha); }
.form-kit .secao-formulario:first-child { margin-top: 0; }
.campo-formulario { margin-bottom: 1rem; }
.campo-formulario .complemento { max-width: 28rem; }
.item-checklist { padding: .45rem 0; border-bottom: 1px dashed var(--linha); }
.item-checklist .complemento { margin-left: 1.5rem; max-width: 26rem; }
.item-checklist .form-check-input:checked + .form-check-label { color: var(--suave); }
.tabela-formulario th { font-size: .8rem; font-weight: 600; color: var(--suave); }
.situacao-formulario { font-size: .8rem; color: var(--areia); }
.situacao-formulario.concluido { color: var(--oliva); }
.preencher-documento { margin-top: .15rem; }


/* ---------- Contrato (editor Quill) ---------- */
.editor-contrato { overflow: hidden; }
.editor-contrato .ql-toolbar.ql-snow { border: 0; border-bottom: 1px solid var(--linha); background: var(--creme-escuro); }
.editor-contrato .ql-container.ql-snow { border: 0; font-family: 'Karla', sans-serif; font-size: 1rem; }
.texto-contrato:not(.ql-container), .editor-contrato .ql-editor { padding: 1.5rem 1.75rem; max-height: 70vh; overflow-y: auto; line-height: 1.55; }
.editor-contrato .ql-editor h2 { font-family: 'Bitter', serif; text-align: center; font-size: 1.25rem; }
.editor-contrato .ql-editor h3 { font-family: 'Bitter', serif; font-size: 1.05rem; margin-top: 1.25rem; }
.editor-contrato .ql-editor p { margin-bottom: .4rem; }

/* ---------- Como escolher o modelo e guia B0 ---------- */
.cartao-escolha { border-left: 3px solid var(--telha); }
.perguntas-modelo, .elementos-contrato { padding-left: 1.25rem; margin: 0; }
.perguntas-modelo li, .elementos-contrato li { padding: .5rem 0 .6rem .25rem; border-bottom: 1px solid var(--linha); }
.perguntas-modelo li:last-child, .elementos-contrato li:last-child { border-bottom: 0; }
.perguntas-modelo li::marker, .elementos-contrato li::marker { font-family: 'Bitter', serif; color: var(--telha); font-weight: 700; }
.matriz-modelos th { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); }

/* ---------- Campos obrigatórios (*) ---------- */
.obrigatorio { color: var(--telha); font-weight: 700; margin-left: .1rem; }
.legenda-obrigatorio { color: var(--areia); margin-bottom: 1rem; }