html, body {
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.95rem;
    letter-spacing: -0.0011em; /* Dica: Inter fica melhor com um leve ajuste no espaçamento */
}

.text-blue {
    color: color-mix(in srgb, #205B94 40%, var(--body-fg, #212529));
}

.text-dodgerblue {
    color: color-mix(in srgb, dodgerblue 50%, var(--body-fg, #212529));
}

.text-gray {
    color: color-mix(in srgb, gray 50%, var(--body-fg, #212529));
}

/* Botões de ação do topo — scroll horizontal no mobile */
.page-actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

.page-actions-outer {
    position: relative;
}

@media (max-width: 640.98px) {
    body {
        background-color: color-mix(in srgb, var(--body-bg, #fff) 95%, black);
    }

    /* Engenharia modal: fundo mais escuro no mobile — mesmo padrão do main */
    .modal-fullscreen .modal-body {
        background-color: color-mix(in srgb, var(--body-bg, #fff) 95%, black) !important;
    }

    .eng-content-bg {
        background: color-mix(in srgb, var(--body-bg, #fff) 95%, black) !important;
    }

    /* Cards dentro da engenharia ficam levemente mais claros que o fundo */
    .modal-fullscreen .modal-body .card {
        background-color: var(--body-bg, #fff) !important;
    }

    /* Botões de ação do topo da página — scroll horizontal no mobile */
    .page-actions,
    .eng-var-tabs,
    .eng-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: visible;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }

    /* Mobile: indicador fica na posição correta após scroll horizontal */
    .eng-tabs-indicator {
        transition: left .28s cubic-bezier(.4,0,.2,1), width .28s cubic-bezier(.4,0,.2,1);
    }

        .page-actions .btn,
        .eng-var-tabs .aba-nav-btn,
        .eng-var-tabs .nav-item,
        .eng-tabs .eng-tabs-btn {
            white-space: nowrap;
            flex-shrink: 0;
        }

        .page-actions::-webkit-scrollbar,
        .eng-var-tabs::-webkit-scrollbar,
        .eng-tabs::-webkit-scrollbar {
            display: none;
        }

    /* Gradiente dinâmico: direita quando há mais conteúdo, esquerda quando scrollado */
    .page-actions-more {
        display: none; /* não usado mais — gradiente via pseudo-elementos do outer */
    }

    .page-actions-outer::before,
    .page-actions-outer::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 4px;
        width: 2.5rem;
        pointer-events: none;
        opacity: 0;
        transition: opacity .2s;
        z-index: 1;
    }

    .page-actions-outer::before {
        left: 0;
        background: linear-gradient(to left, transparent, color-mix(in srgb, var(--body-bg, #fff) 95%, black) 70%);
    }

    .page-actions-outer::after {
        right: 0;
        background: linear-gradient(to right, transparent, color-mix(in srgb, var(--body-bg, #fff) 95%, black) 70%);
        opacity: 1; /* visível por padrão */
    }

    .page-actions-outer.pa-has-start::before { opacity: 1; }
    .page-actions-outer.pa-has-end::after    { opacity: 0; } /* some quando chegou ao fim */
    }

/* ─── EsquadSystem: Design Tokens ─── */
:root {
    --es-primary: #00648C;
    --es-primary-dark: #004f70;
    --es-primary-light: #e8f4f8;
    --es-bg-auth: #f0f4f7;
    --es-primary-30: color-mix(in srgb, var(--primary-color, #00648C) 30%, transparent);
    --es-primary-20: color-mix(in srgb, var(--primary-color, #00648C) 20%, transparent);
    --es-body-bg-20: color-mix(in srgb, var(--body-bg), black 4%);
    --es-body-bg-85: color-mix(in srgb, var(--body-bg, #fff) 85%, var(--body-fg, #212529));
    --es-body-bg-95: color-mix(in srgb, var(--body-bg, #fff) 95%, var(--body-fg, #212529));
    /* NavMenu */
    --navmenu-bg: #2a2d30;
    --navmenu-fg: #c8cdd2;
    --primary-color: #00648C;
    --color-accent: #00648C;
}

/* ─── NavMenu: destaque de submenu ativo (global — NavLink não recebe atributo de escopo) ─── */
/* Tema Escuro (padrão): clareia ligeiramente o fundo ativo */
.nav-root .submenu-link.active {
    background: color-mix(in srgb, var(--navmenu-bg, #14171c), white 8%) !important;
    border-radius: 8px;
}
/* Tema Claro ou Médio: escurece ligeiramente o fundo ativo */
[data-nav-theme="light"] .nav-root .submenu-link.active {
    background: color-mix(in srgb, var(--navmenu-bg, #f5f5f5), black 8%) !important;
    border-radius: 8px;
}

/* ─── Destaque de linha selecionada em tabelas ─── */
tbody tr { cursor: pointer; }

tr.row-selected {
    background-color: color-mix(in srgb, var(--primary-color, #00648C) 12%, transparent) !important;
}

/* ─── Tabelas sem separadores (look clean) ─── */
/*.table > :not(caption) > * > * {
    border-bottom-width: 0;
}
.table > thead > tr > th {
    border-bottom: 1px solid color-mix(in srgb, var(--body-bg, #fff) 95%, var(--body-fg, #212529));
}*/
/**************************************************/

    @media (max-width: 640.98px) {
        .table-cards thead {
            display: none;
        }

        .table-cards {
            display: block;
            width: 100%;
            border: none !important;
        }

            .table-cards tbody {
                display: flex;
                flex-direction: column;
                gap: .4rem;
            }

                .table-cards tbody tr {
                    display: block !important;
                    background: var(--body-bg, #fff);
                    border: 1px solid var(--es-body-bg-95) !important;
                    border-radius: 8px !important;
                    padding: .5rem !important;
                    box-shadow: 0 1px 4px var(--es-primary-20);
                    height: auto !important;
                    background-color: var(--body-bg, #fff);
                }

                    .table-cards tbody tr.row-selected {
                        border-left-width: 5px !important;
                        box-shadow: 0 2px 8px rgba(0,0,0,.15) !important;
                        background-color: color-mix(in srgb, var(--primary-color, #00648C) 8%, transparent) !important;
                        border-left: 3px solid var(--primary-color, #00648C) !important;
                        border-radius: 8px !important;
                    }

            .table-cards td {
                display: block !important;
                border: none !important;
                padding: .15rem 0 !important;
            }

            /* td secundários: ocultos por padrão, revelados ao selecionar o card */
            .table-cards td.d-none.d-md-table-cell,
            .table-cards td.d-none.d-lg-table-cell {
                display: block !important;
                overflow: hidden !important;
                max-height: 0 !important;
                padding-top: 0 !important;
                padding-bottom: 0 !important;
                margin: 0 !important;
                opacity: 0;
                transition: max-height .25s cubic-bezier(.4,0,.2,1), opacity .2s ease, padding .2s ease !important;
            }

            /* card selecionado: expande os td secundários */
            .table-cards tbody tr.row-selected td.d-none.d-md-table-cell,
            .table-cards tbody tr.row-selected td.d-none.d-lg-table-cell {
                max-height: 200px !important;
                opacity: 1 !important;
                padding: .15rem 0 !important;
            }

                .table-cards td[data-label]::before {
                    color: var(--color-accent);
                    content: attr(data-label);
                    display: block;
                    font-size: 0.60rem;
                    line-height: 1;
                    margin-bottom: 1px;
                    text-transform: uppercase;
                    letter-spacing: 0.03em;
                }

                .table-cards td:last-child:not(.row-acoes-cell) {
                    display: flex !important;
                    flex-direction: row;
                    align-items: center;
                    justify-content: flex-end;
                    gap: .35rem;
                    padding-top: .45rem !important;
                    margin-top: .3rem;
                    border-top: 1px solid rgba(0,0,0,.08) !important;
                }

                    .table-cards td:last-child:not(.row-acoes-cell) > div {
                        flex-direction: row !important;
                        gap: .35rem !important;
                    }

        /* card de detalhe expandido: visível só no desktop (mobile usa bloco inline no td) */
        .table-cards tbody tr.orc-item-detalhe-row {
            display: none !important;
        }
        /* item expandido: sem arredondamento inferior (visual limpo) */
        .table-cards tbody tr.orc-item-expandido {
            /* mobile: detalhe fica dentro do card, mantém bordas arredondadas */
            display: block;
        }
    }
    /* ─── Módulo com erro em ADL/ADH ─── */
    .eng-modulo-erro {
        border-left: 3px solid #dc3545;
        background-color: rgba(220, 53, 69, 0.07);
    }
    .eng-modulo-erro .eng-modulo-header {
        color: #dc3545;
    }
    /* ─── Linha de perfil com erro de fórmula (Medida ou Qtde) ─── */
    .eng-row-erro td {
        background-color: rgba(255, 193, 7, 0.12) !important;
    }

    /* ─── Aviso de valor fora dos limites ─── */
    .cfg-acc-warning {
        animation: cfg-warn-pulse 1.4s ease-in-out infinite;
        flex-shrink: 0;
    }
    @keyframes cfg-warn-pulse {
        0%, 100% { opacity: 1; }
        50%       { opacity: .35; }
    }

    /* ─── Variável oculta revelada pelo toggle ─── */
    .cfg-acc-oculta {
        border-left: 3px solid #fd7e14 !important;
        background-color: rgba(253, 126, 20, 0.07);
    }
    .cfg-acc-oculta .cfg-acc-header {
        opacity: .85;
    }

    /* ─── Popover de confirmação de exclusão ─── */
    .excluir-overlay {
        position: fixed;
        inset: 0;
        z-index: 1099;
    }

    .excluir-popover {
        position: fixed;
        z-index: 1100;
        background: var(--body-bg, #fff);
        border: 1px solid rgba(0,0,0,.15);
        border-radius: 8px;
        padding: .4rem .9rem;
        box-shadow: 0 4px 20px rgba(0,0,0,.2);
        transform: translateX(-50%);
        white-space: nowrap;
        animation: excluir-pop .12s ease-out;
    }

    @keyframes excluir-pop {
        from {
            opacity: 0;
            transform: translateX(-50%) scale(.85);
        }

        to {
            opacity: 1;
            transform: translateX(-50%) scale(1);
        }
    }

    .imprimir-popover {
        position: absolute;
        z-index: 1100;
        top: 100%;
        right: 0;
        margin-top: 4px;
        background: var(--body-bg, #fff);
        border: 1px solid rgba(0,0,0,.15);
        border-radius: 8px;
        padding: .5rem;
        box-shadow: 0 4px 20px rgba(0,0,0,.2);
        width: max-content;
        min-width: 140px;
        max-width: calc(100vw - 32px);
        animation: imprimir-pop .12s ease-out;
    }

    @keyframes imprimir-pop {
        from { opacity: 0; transform: scale(.85); }
        to { opacity: 1; transform: scale(1); }
    }

    @keyframes acoes-pop {
        from { opacity: 0; transform: translateX(-100%) scale(.85); }
        to { opacity: 1; transform: translateX(-100%) scale(1); }
    }

    .acoes-popover {
        position: fixed;
        z-index: 1100;
        background: color-mix(in srgb, var(--body-bg) 95%, var(--body-fg));
        border: 1px solid color-mix(in srgb, var(--body-bg) 90%, var(--body-fg, #212529));
        border-radius: 8px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
        width: auto;
        min-width: 170px;
        max-width: 300px;
        transform: translateX(-100%);
        animation: acoes-pop .12s ease-out;
        overflow: hidden;
    }

    .acoes-popover-header {
        padding: 10px 12px;
        font-size: .78rem;
        font-weight: 600;
        border-bottom: 1px solid color-mix(in srgb, var(--body-fg, #212529) 10%, var(--body-bg, #fff));
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .acoes-popover-body {
        display: flex;
        gap: 8px;
        padding: 8px;
    }

    .acoes-popover-img {
        flex: 1;
        min-height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #ffffff;
        border-radius: 4px;
        overflow: hidden;
    }

    .acoes-popover-img img {
        max-width: 94%;
        max-height: 94px;
        object-fit: contain;
    }

    .acoes-popover-btns {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .acoes-popover-btns .btn {
        position: relative;
        text-align: center;
        font-size: .75rem;
        padding: 4px 10px 4px 15px;
    }

    .acoes-popover-btns .btn .fas,
    .acoes-popover-btns .btn .far {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        margin-right: 0 !important;
    }


    /* ─── Row Actions Slide (botão ⋮ + push inline por linha) ─── */
    /*
     * A <td> fica fixa em 38px — nunca expande, não afeta outras linhas.
     * O wrap usa position:absolute ancorado na <tr> (position:relative),
     * expande para a esquerda sobre as células vizinhas da mesma linha.
     */
    .row-acoes-cell {
        width: 38px;
        min-width: 38px;
        max-width: 38px;
        padding: 0 !important;
        text-align: right;
        vertical-align: middle;
        position: static;
    }

    /* a <tr> é o contexto de posicionamento do wrap */
    tr:has(.row-acoes-cell) {
        position: relative;
    }

.row-acoes-wrap {
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -19px; /* metade fixa de 38px — sem transform para evitar subpixel jitter */
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    width: 38px;
    height: 38px;
    z-index: 5;
    background: var(--es-body-bg-95);
    border-radius: 58px;
}

@media (max-width: 575.98px) {
    .row-acoes-wrap {
        top: 0 !important;
        margin-top: 0 !important;
        right: 0 !important;
        margin-right: 0 !important;
    }
    .orc-acoes-spacer {
        min-width: 28px !important;
    }
}

    /* linha selecionada: fundo diferente — ajusta a cor do wrap */
tr.row-selected .row-acoes-wrap {
    background: var(--es-body-bg-95);
}

.row-acoes-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    cursor: pointer;
    background:color-mix(in srgb, var(--body-fg, #212529) 8%, var(--body-bg, #fff));
    border: none;
    border-radius: 38px;
    font-size: 1rem;
    transition: color .15s, background .15s;
    color: var(--body-accent);
}

    .row-acoes-trigger:hover {
        /*color: var(--primary-color, #00648C);
        background: rgba(0,0,0,.05);*/
        color: whitesmoke;
        background: var(--body-accent);
    }

    /* mobile (table-cards): ⋮ no canto superior direito */
    @media (max-width: 640.98px) {
        tr:has(.row-acoes-cell) {
            position: relative !important;
        }

        /* evita scrollbar momentânea durante o recolhimento do wrap */
        .table-responsive {
            overflow-x: clip !important;
        }

        /* célula vira âncora invisível — zero espaço no fluxo */
        .table-cards td.row-acoes-cell {
            display: block !important;
            width: 0 !important;
            min-width: 0 !important;
            max-width: 0 !important;
            height: 0 !important;
            padding: 0 !important;
            margin: 0 !important;
            border: none !important;
            overflow: visible !important;
        }

        /* wrap ancorado no canto superior direito do card */
        .row-acoes-wrap {
            position: absolute !important;
            top: 7px !important;
            right: 5px !important;
            margin-top: 0 !important;
            transform: none !important;
            flex-direction: column !important;
            align-items: center !important;
            width: 38px !important;
            height: 38px !important;
            background: transparent !important;
            box-shadow: none !important;
            border-radius: 38px !important;
            z-index: 10;
            padding-bottom: 0 !important;
        }

        .row-acoes-trigger {
            width: 30px;
            height: 30px;
        }
   

        /* no mobile o ⋮ nunca recebe fundo colorido */
        .row-acoes-wrap .row-acoes-trigger:hover,
        .row-acoes-wrap .row-acoes-trigger:focus {
            color: var(--primary-color, #00648C) !important;
            background: transparent !important;
        }
    }

    /* ─── Engenharia — tab bar estilo underline ─── */
    .eng-tabs {
        display: flex;
        gap: 0;
        border-bottom: 1px solid color-mix(in srgb, var(--body-bg, #fff) 95%, var(--body-fg, #212529));
        padding: 0 4px;
        overflow-x: auto;
        scrollbar-width: none;
    }

        .eng-tabs::-webkit-scrollbar {
            display: none;
        }

    .eng-tabs {
        position: relative;
    }

    .eng-tabs-btn {
        background: none;
        border: none;
        padding: 9px 18px 11px;
        font-size: .85rem;
        color: var(--text-secondary, #888);
        cursor: pointer;
        transition: color .15s;
        white-space: nowrap;
        border-radius: 4px 4px 0 0;
        letter-spacing: .01em;
    }

        .eng-tabs-btn:hover {
            color: var(--body-accent);
        }

        .eng-tabs-btn.active {
            color: var(--body-accent);
            font-weight: 600;
        }

    /* ── Sliding indicator (barrinha deslizante) ── */
    .eng-tabs-indicator {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0;
        height: 3px;
        border-radius: 3px;
        background: var(--body-accent);
        transition: left .28s cubic-bezier(.4,0,.2,1), width .28s cubic-bezier(.4,0,.2,1);
        pointer-events: none;
        z-index: 1;
    }

    .eng-tabs-indicator.no-transition {
        transition: none !important;
    }

/* ─── Cabeçalho Materiais ─── */
.eng-cab {
    background:var(--es-primary-20);
    color: var(--body-fg);
    cursor:pointer;
    border:solid;
    border-width:1px;
    border-color: var(--primary-color);
    max-height: 45px;
}

/* ─── Imagem Técnica — labels ─── */
.imtec-label {
    position: absolute;
    white-space: nowrap;
    line-height: 1.2;
    padding: 0;
    margin: 0;
    cursor: default;
    user-select: none;
    pointer-events: auto;
}

.imtec-label-v {
    transform: rotate(-90deg) translateX(-100%);
    transform-origin: 0 0;
}

/* ─── Imagem Técnica — editor ─── */
.imtec-label.imtec-editing {
    cursor: move;
    outline: 1px dashed rgba(0,120,215,.5);
    outline-offset: 1px;
}
.imtec-label.imtec-editing:hover {
    outline: 2px solid rgba(0,120,215,.8);
}
.imtec-label.imtec-selected {
    outline: 2px solid #0078d7;
    outline-offset: 1px;
}

/* ─── Imagem Técnica — Drawing tools panel ─── */
.imtec-draw-panel {
    display: flex;
    gap: 6px;
    align-items: flex-start;
}
.imtec-tools-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px;
    background: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 4px;
    max-height: calc(100vh - 340px);
    overflow-y: auto;
}
.imtec-tool-btn {
    width: 30px;
    height: 30px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;
    color: #333;
}
.imtec-tool-btn:hover {
    background: #ddd;
    border-color: #bbb;
}
.imtec-tool-btn.active {
    background: #0078d7;
    color: #fff;
    border-color: #005a9e;
}
.imtec-side-panel {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 130px;
}
.imtec-colors-box {
    padding: 6px;
    background: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.imtec-colors-box .imtec-header {
    background: var(--primary-color, #00697e);
    color: #fff;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 0;
    border-radius: 2px;
    margin-bottom: 6px;
}
.imtec-color-preview {
    position: relative;
    width: 60px;
    height: 40px;
    margin: 0 auto 6px auto;
}
.imtec-color-fg, .imtec-color-bg {
    position: absolute;
    border: 2px solid #888;
    cursor: pointer;
}
.imtec-color-bg {
    width: 32px;
    height: 32px;
    right: 0;
    bottom: 0;
}
.imtec-color-fg {
    width: 32px;
    height: 32px;
    left: 0;
    top: 0;
    z-index: 1;
    border-color: #333;
}
.imtec-swatches {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.imtec-swatch {
    width: 100%;
    aspect-ratio: 1;
    border: 1px solid #999;
    cursor: pointer;
    border-radius: 2px;
}
.imtec-swatch:hover {
    border-color: #333;
    transform: scale(1.15);
}
.imtec-line-box {
    padding: 6px;
    background: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.imtec-line-box .imtec-header {
    background: var(--primary-color, #00697e);
    color: #fff;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 0;
    border-radius: 2px;
    margin-bottom: 6px;
}
.imtec-canvas-area {
    flex: 1;
    min-width: 0;
}
.imtec-canvas-area canvas {
    display: block;
    image-rendering: auto;
}
.imtec-label.imtec-no-pointer {
    pointer-events: none;
}

    /* ─── Primary color overrides ─── */
    .item-primary-color {
        color: var(--body-accent);
    }

    a, .btn-link {
        color: var(--es-primary);
    }

        a:hover, .btn-link:hover {
            color: var(--es-primary-dark);
        }

        .btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
        .form-control:focus, .form-check-input:focus {
            box-shadow: 0 0 0 0.2rem rgba(0, 100, 140, 0.25);
        }

    .btn-primary {
        --color: color-mix(in srgb, var(--primary-color) 80%, black);
        color: #fff;
        background: linear-gradient(var(--primary-color),var(--color));
        border: none;
        /*border-color: var(--primary-color, #1861ac);*/
    }

        .btn-primary:hover,
        .btn-primary:focus {
            --colorHover: color-mix(in srgb, var(--primary-color) 60%, black);
            background: linear-gradient(var(--color),var(--primary-color));
            border-color: var(--primary-color, #1861ac);
        }

    .btn-secondary {
        --color: color-mix(in srgb, grey 80%, black);
        color: #fff;
        background: linear-gradient(grey,var(--color));
        border: none;
    }

        .btn-secondary:hover,
        .btn-secondary:focus {
            background: linear-gradient(var(--color),grey);
            border-color: grey;
        }

    .btn-success {
        --color: color-mix(in srgb, rgb(0, 160, 35) 80%, black);
        color: #fff;
        background: linear-gradient(rgb(0, 160, 35),var(--color));
        border: none;
    }

        .btn-success:hover,
        .btn-success:focus {
            background: linear-gradient(var(--color),rgb(0, 160, 35));
            border-color: rgb(0, 160, 35);
        }

    .btn-danger {
        --color: color-mix(in srgb, rgb(220,53,69) 80%, black);
        color: #fff;
        background: linear-gradient(rgb(220,53,69),var(--color));
        border: none;
    }

        .btn-danger:hover,
        .btn-danger:focus {
            background: linear-gradient(var(--color),rgb(220,53,69));
            border-color: rgb(220,53,69);
        }    

    .btn-icon {
        --color: var(--body-accent, var(--primary-color, #00648C));
        color: color-mix(in srgb, var(--body-bg, #fff) 5%, var(--body-fg, #212529));
        background-color: transparent;
        border-color: transparent;
        transition: background-color .15s ease-in-out, color .15s ease-in-out;
    }

        .btn-icon:hover,
        .btn-icon:focus-visible {
            background-color: var(--color);
            color: #fff;
        }

        .btn-icon .fa,
        .btn-icon .oi,
        .btn-icon .fas,
        .btn-icon .far {
            color: currentColor;
        }

        .btn-icon:focus {
            box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem currentColor;
        }

    .form-control:focus {
        border-color: var(--es-primary);
    }
    /* ─── Auth Layout ─── */
    .auth-wrapper {
        min-height: 100vh;
        background-color: var(--es-bg-auth);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2rem 1rem;
    }

    .auth-card {
        background: #ffffff;
        border-radius: 0.75rem;
        width: 100%;
        max-width: 420px;
        padding: 2.5rem 2rem 1.75rem;
        border: 1px solid #e5eaee;
    }

    .auth-brand {
        text-align: center;
        margin-bottom: 2rem;
    }

    .auth-logo {
        height: 64px;
        display: block;
        margin: 0 auto 0.6rem;
        object-fit: contain;
    }

    .auth-brand-name {
        display: block;
        font-size: 1.3rem;
        font-weight: 600;
        color: var(--es-primary);
        letter-spacing: 0.4px;
    }

    .btn-auth {
        padding: 0.7rem 1rem;
        font-size: 1rem;
        font-weight: 500;
        border-radius: 0.5rem;
        letter-spacing: 0.3px;
    }

    .auth-link {
        font-size: 0.875rem;
        color: var(--es-primary);
        text-decoration: none;
    }

        .auth-link:hover {
            color: var(--es-primary-dark);
            text-decoration: underline;
        }

    .auth-footer {
        text-align: center;
        margin-top: 1.75rem;
        color: #9ca3af;
        font-size: 0.78rem;
    }
    /* ─── Utilitários gerais ─── */
    .content {
        padding-top: 1.1rem;
    }

    h1:focus {
        outline: none;
    }

    .valid.modified:not([type=checkbox]) {
        outline: 1px solid #26b050;
    }

    .invalid {
        outline: 1px solid #e50000;
    }

    .validation-message {
        color: #e50000;
    }

    .blazor-error-boundary {
        background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA9NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
        padding: 1rem 1rem 1rem 3.7rem;
        color: white;
    }

        .blazor-error-boundary::after {
            content: "An error has occurred."
        }

    .darker-border-checkbox.form-check-input {
        border-color: #929292;
    }

    .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
        color: var(--bs-secondary-color);
        text-align: end;
    }

    .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
        text-align: start;
    }
    /* ─── Body Theme:

/* Deriva cor secundária (text-muted) e borda globais do Bootstrap a partir das nossas variáveis */
    :root {
        --bs-secondary-color: color-mix(in srgb, var(--body-fg, #212529) 58%, var(--body-bg, #fff));
        --bs-border-color: color-mix(in srgb, var(--body-bg, #fff) 75%, var(--body-fg, #212529));
        /* Accent reativo ao body: clareia no tema escuro, escurece no tema claro */
        --body-accent: color-mix(in srgb, var(--primary-color) 75%, var(--body-fg, #212529));
    }
    /* text-success adaptável ao tema */
    .text-success {
        color: color-mix(in srgb, var(--body-fg, #212529) 20%, #22c55e) !important;
    }
    .text-danger {
        color: color-mix(in srgb, var(--body-fg, #212529) 25%, #dc3545) !important;
    }
    /* Cards */
    .card {
        background-color: color-mix(in srgb, var(--body-bg) 96%, var(--primary-color));
        color: var(--body-fg, #212529);
        border-color: color-mix(in srgb, var(--body-bg, #fff) 90%, var(--body-fg, #212529));
    }
    /* Tabelas */
    .table {
        --bs-table-color: var(--body-fg, #212529);
        --bs-table-bg: transparent;
        --bs-table-border-color: color-mix(in srgb, var(--body-bg, #fff) 75%, var(--body-fg, #212529));
        color: var(--body-fg, #212529);
    }

        .table > :not(caption) > * {
            border-color: color-mix(in srgb, var(--body-bg, #fff) 88%, var(--body-fg, #212529));
        }

        .table thead > tr > th,
        .table thead > tr > td {
            color: var(--body-accent);
        }

        .table thead > tr:hover {
            background: var(--body-bg);
        }

        .table tr:hover {
            background-color: color-mix(in srgb, var(--body-bg) 94%, var(--primary-color));
        }
    /* Inputs e Selects */
    .form-control,
    .form-select {
        background-color: color-mix(in srgb, var(--body-bg, #fff) 90%, var(--body-fg, #212529));
        color: var(--body-fg, #212529);
        border-color: color-mix(in srgb, var(--body-bg, #fff) 65%, var(--body-fg, #212529));
    }

        .form-control::placeholder {
            color: color-mix(in srgb, var(--body-fg, #212529) 48%, var(--body-bg, #fff));
        }

        .form-control:focus,
        .form-select:focus {
            background-color: color-mix(in srgb, var(--body-bg, #fff) 90%, var(--body-fg, #212529));
            color: var(--body-fg, #212529);
        }

    .input-group-text {
        background-color: color-mix(in srgb, var(--body-bg, #fff) 83%, var(--body-fg, #212529));
        color: var(--body-fg, #212529);
        border-color: color-mix(in srgb, var(--body-bg, #fff) 65%, var(--body-fg, #212529));
    }
    /* Modais */
    .modal-content {
        background-color: color-mix(in srgb, var(--body-bg, #fff) 96%, var(--body-fg, #212529));
        color: var(--body-fg, #212529);
        border-color: color-mix(in srgb, var(--body-bg, #fff) 65%, var(--body-fg, #212529));
    }

    .modal-header {
        background-color: color-mix(in srgb, var(--body-bg, #fff) 85%, var(--body-fg, #212529));
        border-bottom-color: color-mix(in srgb, var(--body-bg, #fff) 65%, var(--body-fg, #212529));
    }

        .modal-header .btn-close {
            filter: invert(var(--body-btn-close-invert, 0));
        }

    .btn-close {
        filter: invert(var(--body-btn-close-invert, 0));
    }

/* ─── btn-back: seta para esquerda no estilo do btn-close ─── */
.btn-back {
    box-sizing: content-box;
    width: 1.8em;
    height: 1.8em;
    padding: .25em .25em;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cline x1='13' y1='8' x2='3' y2='8' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpolyline points='7,4 3,8 7,12' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 1.5em auto no-repeat;
    border: 0;
    border-radius: .375rem;
    opacity: .55;
    cursor: pointer;
    transition: opacity .15s ease-in-out, background-color .15s ease-in-out;
    filter: invert(var(--body-btn-close-invert, 0));
}
.btn-back:hover {
    opacity: 1;
}
.btn-back:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(0, 100, 140, .35);
    opacity: 1;
}
.btn-back:disabled {
    opacity: .25;
    pointer-events: none;
}

    .modal-footer {
        background-color: color-mix(in srgb, var(--body-bg, #fff) 85%, var(--body-fg, #212529)) !important;
        border-top-color: color-mix(in srgb, var(--body-bg, #fff) 65%, var(--body-fg, #212529));
    }

/* -- Thumb Preview -- */
.thumb-wrap {
    cursor: zoom-in;
}

/* -- Image Hover Zoom (OrcamentoDetalhe) -- */
.thumb-hover-zoom {
    position: relative;
    cursor: zoom-in;
}

.thumb-hover-zoom .hover-preview {
    display: none;
    position: absolute;
    z-index: 1200;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    padding: 6px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0,0,0,.25);
    pointer-events: none;
}

.thumb-hover-zoom .hover-preview-lg {
    bottom: auto;
    top: calc(100% + 6px);
}

.thumb-hover-zoom:hover .hover-preview {
    display: block;
    animation: hover-zoom-in .15s ease-out;
}

@keyframes hover-zoom-in {
    from { opacity: 0; transform: translateX(-50%) scale(.85); }
    to   { opacity: 1; transform: translateX(-50%) scale(1); }
}

/* -- OrcamentoDetalhe: Tabela flat de itens -- */
.orc-itens-table thead th {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: var(--body-muted, #6c757d);
    font-weight: 600;
    border-bottom: 1px solid rgba(0,0,0,.08);
    padding-block: .35rem;
}

.orc-item-row {
    transition: background .12s;
    height: 64px;
}

.orc-item-row:hover {
    background: color-mix(in srgb, var(--body-bg) 88%, black);
}

.orc-item-row.orc-item-expandido {
    background: color-mix(in srgb, var(--body-bg) 92%, black);
}

/* OrcamentoDetalhe: card expandido sem borda extra (apenas sombra + fundo) */
.orc-item-row.row-selected {
    border-left-width: 0 !important;
    border-left: none !important;
}

@media (max-width: 640.98px) {
    /* OrcamentoDetalhe: manter colunas desktop ocultas mesmo com row-selected */
    .table-cards tbody tr.orc-item-row.row-selected td.d-none.d-md-table-cell,
    .table-cards tbody tr.orc-item-row.row-selected td.d-none.d-lg-table-cell {
        max-height: 0 !important;
        opacity: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}

.orc-item-detalhe-row td {
    padding: 0;
}

/* -- Chevron rotativo (accordion/collapse) -- */
.chevron-rotate {
    transition: transform .25s cubic-bezier(.4, 0, .2, 1);
}
.chevron-rotate.expandido {
    transform: rotate(180deg);
}


/* -- OrcamentoDetalhe: Detalhe item inline -- */
.orc-detalhe-item {
    margin-bottom: .25rem;
}

/* -- OrcamentoDetalhe: Chips de resumo (Proposta 3) -- */
.orc-detalhe-chip {
    display: inline-flex;
    align-items: baseline;
    gap: .25rem;
    background: color-mix(in srgb, var(--body-accent) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--body-accent) 25%, transparent);
    border-radius: .375rem;
    padding: .15rem .45rem;
    font-size: .72rem;
    white-space: nowrap;
}
.orc-detalhe-chip-label {
    font-weight: 600;
    color: var(--body-accent);
    font-size: .65rem;
    letter-spacing: .3px;
}
.orc-detalhe-chip-value {
    color: var(--body-fg);
}

.orc-detalhe-chip-vidro {
    display: inline-flex;
    align-items: baseline;
    gap: .35rem;
    background: #dbeafe;
    border: 1px solid #b8d4fe;
    border-radius: .375rem;
    padding: .2rem .5rem;
    font-size: .72rem;
    white-space: nowrap;
    color: #1e40af;
}
.orc-detalhe-chip-vidro .orc-detalhe-chip-label {
    font-weight: 600;
    color: #1e40af;
}
.orc-detalhe-chip-vidro .orc-detalhe-chip-value {
    color: #1e3a8a;
}

/* -- OrcamentoDetalhe: Grid de variáveis/vidros (Proposta 3) -- */
.orc-detalhe-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: .3rem .75rem;
    margin-top: .35rem;
}
@media (min-width: 576px) {
    .orc-detalhe-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (min-width: 992px) {
    .orc-detalhe-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
.orc-detalhe-cell {
    border-left: 2px solid color-mix(in srgb, var(--body-accent) 35%, transparent);
    padding-left: .4rem;
    min-width: 0;
}
.orc-detalhe-cell-label {
    font-size: .63rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: var(--body-accent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.orc-detalhe-cell-value {
    font-size: .75rem;
    color: var(--body-fg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* -- OrcamentoDetalhe: Footer Cálculo -- */
.orc-footer-calc {
    border: 1px solid rgba(0,0,0,.1);
    border-left: 4px solid var(--primary-color, #00648C);
    border-radius: 8px;
    background: color-mix(in srgb, var(--body-bg) 97%, var(--primary-color, #00648C));
    overflow: hidden;
}

.orc-footer-regra {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .9rem;
    background: color-mix(in srgb, var(--body-bg) 93%, var(--primary-color, #00648C));
    border-bottom: 1px solid rgba(0,0,0,.07);
    flex-wrap: wrap;
}

.orc-footer-regra-icon {
    color: var(--body-accent, #00648C);
    font-size: .8rem;
    flex-shrink: 0;
}

.orc-footer-regra-label {
    font-size: .7rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: .4px;
    color: var(--body-accent, #00648C);
    flex-shrink: 0;
}

.orc-footer-regra-value {
    font-size: .82rem;
    font-weight: 600;
    color: var(--body-text);
}

.orc-footer-body {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .6rem .9rem;
}

.orc-footer-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    flex: 1 1 auto;
}

.orc-footer-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--body-bg);
    border: 1px solid rgba(0,0,0,.1);
    border-radius: 6px;
    padding: .25rem .6rem;
    min-width: 72px;
}

.orc-footer-chip-label {
    font-size: .62rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: .3px;
    color: #888;
    white-space: nowrap;
}

.orc-footer-chip-value {
    font-size: .78rem;
    font-weight: 600;
    color: var(--body-text);
    white-space: nowrap;
}

.orc-footer-sep {
    width: 1px;
    align-self: stretch;
    background: rgba(0,0,0,.1);
    flex-shrink: 0;
    margin: .1rem 0;
}

.orc-footer-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .4rem;
    flex-shrink: 0;
}

.orc-footer-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    justify-content: flex-end;
}

.orc-footer-badge {
    font-size: .7rem;
    font-weight: 600;
    border-radius: 20px;
    padding: .2rem .55rem;
    white-space: nowrap;
}

.orc-footer-badge-total {
    background: #6c757d;
    color:#ffffff;
    opacity: .8;
}

.orc-footer-badge-ok {
    background: #28a745;
    color: #ffffff;
    opacity: .8;
}

.orc-footer-badge-warn {
    background: #ffc107;
    color: #212529;
    opacity: .8;
}

.orc-footer-total {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.orc-footer-total-label {
    font-size: .62rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: .4px;
    color: var(--body-fg, #6c757d);
}

.orc-footer-total-value {
    font-size: 1.25rem;
    font-weight: 800;
    color: color-mix(in srgb, var(--body-fg) 50%, dodgerblue);
    line-height: 1.1;
}

@media (max-width: 640.98px) {
    .orc-footer-regra { gap: .4rem; }
    .orc-footer-regra .orc-footer-regra-btn { margin-left: 0 !important; width: 100%; justify-content: center; }

    .orc-footer-body {
        flex-direction: column;
        gap: 0;
        padding: 0;
    }

    /* Chips: grid 2 colunas, cada chip horizontal (label + valor na mesma linha) */
    .orc-footer-chips {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0;
        width: 100%;
        border-bottom: 1px solid rgba(0,0,0,.08);
        padding: .4rem .6rem;
    }

    .orc-footer-chip {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        background: transparent;
        border: none;
        border-radius: 0;
        padding: .2rem .3rem;
        min-width: 0;
        gap: .4rem;
    }

    .orc-footer-chip-label { white-space: nowrap; }
    .orc-footer-chip-value { white-space: nowrap; }

    /* Separador vertical: esconde */
    .orc-footer-sep { display: none; }

    /* Parte inferior: badges à esquerda, total à direita — numa faixa */
    .orc-footer-right {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: .45rem .7rem;
        background: color-mix(in srgb, var(--body-bg) 90%, var(--primary-color, #00648C));
        gap: .5rem;
    }

    .orc-footer-badges { justify-content: flex-start; flex-wrap: wrap; }

    .orc-footer-total {
        align-items: flex-end;
        flex-shrink: 0;
    }

    .orc-footer-total-value { font-size: 1.1rem; }
}

/* ── Log de erros de fórmula do orçamento ─────────────────────────── */
.orc-log-erros {
    border: 1px solid #f5c6cb;
    border-radius: 6px;
    overflow: hidden;
}

.orc-log-erros-header {
    background: #f8d7da;
    color: #721c24;
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    padding: 6px 12px;
    border-bottom: 1px solid #f5c6cb;
    display: flex;
    align-items: center;
}

.orc-log-erros-body {
    background: #fff;
    color: #333;
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 0.78rem;
    line-height: 1.6;
    margin: 0;
    padding: 10px 14px;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 260px;
    overflow-y: auto;
}

@media (max-width: 640.98px) {
    .thumb-hover-zoom .hover-preview {
        left: 0;
        transform: none;
    }
    .thumb-hover-zoom:hover .hover-preview {
        animation: none;
    }
}

/* -- Reorder Floater -- */
.reorder-floater {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 1200;
    background: #fff;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: .5rem;
    box-shadow: 0 4px 20px rgba(0,0,0,.2);
    padding: .75rem 1rem;
    min-width: 220px;
    max-width: 280px;
}

.brand-area {
    display: flex;
    flex-direction: column;
    padding: 0.25rem 0.5rem;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: opacity 0.2s ease;
}

/* ===== OPO Timeline ===== */
.orc-timeline {
    gap: 0 !important;
}

.orc-timeline-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 80px;
    flex-shrink: 0;
}

.orc-timeline-circle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    background: var(--border-color, #dee2e6);
    color: #999;
    transition: background .2s, color .2s;
}

.orc-timeline-step.active .orc-timeline-circle {
    background: var(--primary-color, #0d6efd);
    color: #fff;
}

.orc-timeline-label {
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #999;
    margin-top: 6px;
    letter-spacing: .03em;
}

.orc-timeline-step.active .orc-timeline-label {
    color: var(--primary-color, #0d6efd);
}

.orc-timeline-value {
    font-size: .75rem;
    color: var(--text-secondary, #666);
    margin-top: 2px;
}

/* ============================================================
   Barra de abas global (.abas-botao / .aba-nav-btn)
   ============================================================ */
.abas-botao {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 0 5px;
    border-bottom: 1px solid color-mix(in srgb, var(--body-fg, #212529) 5%, var(--body-bg, #fff));
    margin-bottom: 12px;
}
@media (min-width: 576px) {
    .abas-botao {
        margin-top: -1rem; /* cancela o p-sm-3 do container pai */
    }
}

.aba-nav-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 10px 18px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: #888888;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, box-shadow 0.2s ease-out;
    min-width: 80px;
    max-height: 28px;
}

.aba-nav-btn span.fas {
    font-size: 1.25rem;
    color: var(--body-accent, #555);
    transition: color 0.15s;
}

.aba-nav-btn:hover {
    color: var(--body-accent, #0d6efd);
}

.aba-nav-btn:hover span.fas {
    color: var(--body-accent, #0d6efd);
}

/* Miniatura de material (perfil/acessório/vidro) — fundo sempre branco, sem borda */
.mat-img-card {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 42px;
    background: #ffffff;
    border-radius: 3px;
    padding: 2px;
    flex-shrink: 0;
}

/* ─── Dashboard Cards (reutilizável entre componentes) ─── */
.dashboard-card {
    border: none !important;
}
.dashboard-card .card-body {
    padding: 1.5rem 1.3rem;
}
.dashboard-card-accent {
    border-left: 4px solid var(--dash-accent, #22c55e) !important;
}

.dashboard-label {
    font-size: 0.8rem;
    font-weight: 550;
    letter-spacing: 0.04em;
    opacity: 0.75;
}
.dashboard-icon {
    font-size: 0.95rem;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.dashboard-value {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 1px 0;
}
.dashboard-sub {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.2;
    margin: 1px 0;
    opacity: 0.95;
}
.dashboard-trend {
    font-size: 0.71rem;
    margin-top: 1px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.aba-nav-btn.ativo {
    background: var(--primary-color, #0d6efd);
    border: none;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
}

.aba-nav-btn.ativo span.fas {
    color: #fff;
}

.orc-timeline-step.active .orc-timeline-value {
    font-weight: 600;
    color: var(--body-fg, #212529);
}

.orc-timeline-line {
    flex: 1;
    height: 3px;
    background: var(--border-color, #dee2e6);
    align-self: flex-start;
    margin-top: 20px;
    min-width: 20px;
    transition: background .2s;
}

.orc-timeline-line.active {
    background: var(--primary-color, #0d6efd);
}

@media (max-width: 640.98px) {
    .orc-timeline {
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
    }

    .orc-timeline-step {
        flex-direction: row !important;
        gap: 10px;
        text-align: left;
        align-items: center;
    }

    .orc-timeline-circle {
        width: 34px;
        height: 34px;
        font-size: .85rem;
        flex-shrink: 0;
    }

    .orc-timeline-label {
        margin-top: 0;
    }

    .orc-timeline-value {
        margin-top: 0;
    }

    .orc-timeline-line {
        width: 3px;
        height: 20px;
        min-width: unset;
        flex: none;
        margin-top: 0;
        margin-left: 16px;
        align-self: unset;
    }
}

/* ===== Modal Flutuante (AdicionarItem) ===== */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 1098;
}

.modal-flutuante {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1099;
    background: var(--body-bg, #fff);
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 10px;
    padding: 1.2rem 1.4rem;
    box-shadow: 0 8px 40px rgba(0,0,0,.28);
    width: min(520px, 95vw);
    max-height: 90vh;
    overflow-y: auto;
    animation: modal-in .15s ease-out;
}

@keyframes modal-in {
    from { opacity: 0; transform: translate(-50%, -48%) scale(.95); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Browser de produtos */
.browser-lista { border: 1px solid rgba(0,0,0,.1); border-radius: 6px; }

.browser-item:hover  { background: rgba(var(--bs-primary-rgb), .06); }
.browser-item-ativo  { background: rgba(var(--bs-primary-rgb), .12) !important; }


/* ── Engenharia: tabela com larguras fixas de coluna ── */
.eng-fixed-table {
    table-layout: fixed;
    width: 100%;
}

/* ── Resumo Geral ── */
.resumo-section-header td {
    background: rgb(0,100,140) !important;
    color: #fff !important;
    font-weight: 600;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.resumo-subtotal td {
    background: var(--bs-gray-200);
    font-weight: 600;
}
.resumo-table thead th {
    font-size: .75rem;
    white-space: nowrap;
}
.resumo-table td {
    font-size: .82rem;
    white-space: nowrap;
}
.resumo-valor-principal {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
}
.resumo-valor-medio {
    font-size: 1.2rem;
    font-weight: 600;
}
.resumo-card-destaque {
    border: 2px solid var(--primary-color, #0d6efd);
}
.resumo-table-itens thead th {
    font-size: .72rem;
    white-space: nowrap;
}
.resumo-table-itens td {
    font-size: .78rem;
}

/* ── CriadorFachada ───────────────────────────────────────────────────── */
.cf-shell {
    position: fixed;
    inset: 0;
    z-index: 1200;
    overflow: hidden;
}
.cf-sidebar {
    flex-shrink: 0;
    overflow-y: auto;
    font-size: .80rem;
}
.cf-cell {
    transition: outline 0.05s;
    outline: 2px solid transparent;
}
.cf-cell:hover {
    outline: 2px solid dodgerblue;
    z-index: 2;
}
.cf-cell-sel {
    outline: 2px solid #e65c00 !important;
    background-color: color-mix(in srgb, orange 20%, white) !important;
    z-index: 3;
}
.cf-cell-merge {
    z-index: 4;
}
.cf-cell-label {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    overflow: hidden;
    padding: 2px;
}

/* ══════════════════════════════════════════════════════════════════════
   Bottom Sheet: modais deslizam de baixo pra cima no mobile
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 640.98px) {
    .modal.show.d-block {
        display: flex !important;
        align-items: flex-end !important;
        padding: 0 !important;
    }

    .modal.show.d-block .modal-dialog {
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        max-height: 85vh;
        transform: translateY(100%);
        animation: modal-slide-up 0.3s ease-out forwards;
    }

    .modal.show.d-block .modal-content {
        border-radius: 16px 16px 0 0 !important;
        box-shadow: 0 -4px 24px rgba(0,0,0,.15);
        max-height: 85vh;
        overflow-y: auto;
        border-bottom: none;
    }

    .modal.show.d-block .modal-header {
        border-radius: 16px 16px 0 0 !important;
    }

    .modal.show.d-block .modal-footer {
        border-radius: 0 !important;
    }

    @keyframes modal-slide-up {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }
}

/* ===== OrcamentoDetalhe: PDF Viewer fullscreen (mesmo padrão RelatoriosOPO) ===== */
.orc-pdf-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1099;
    animation: fadeIn 0.15s ease-out;
}

.orc-pdf-modal {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    z-index: 1100;
    background: white;
    animation: slideUp 0.2s ease-out;
}

.orc-pdf-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid color-mix(in srgb, var(--body-bg, #fff) 85%, var(--body-fg, #212529));
    background: var(--body-bg, #fff);
    flex-shrink: 0;
}

.orc-pdf-modal-titulo {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--body-fg, #212529);
    flex: 1;
}

.orc-pdf-modal-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.orc-pdf-modal-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.orc-pdf-modal-iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

.orc-pdf-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #fff;
    z-index: 1;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Botão toggle navmenu no HeaderBar ── */
.header-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: inherit;
    font-size: 1.1rem;
    cursor: pointer;
    border-radius: 6px;
    margin-right: 4px;
    flex-shrink: 0;
    transition: background .15s;
}
.header-nav-toggle:hover {
    background: rgba(255,255,255,.12);
}