/* =====================================================================
   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);
}

.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);
}

.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); }
/* Etapa clicável: link transparente em volta da barra, com área de clique maior que a barra fina. */
a.barra-segmento-link {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    padding-block: .55rem;
    margin-block: -.55rem;
    cursor: pointer;
}
a.barra-segmento-link:hover .barra-segmento { filter: brightness(.82); }
a.barra-segmento-link:focus-visible { outline: 2px solid var(--telha); outline-offset: 2px; border-radius: 4px; }
.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;
}