é um COMPONENTE: o que ele renderiza NÃO recebe o atributo de escopo
(b-xxxx) do NavMenu.razor.css, então as regras de lá que miram o próprio não casam
e o link cai no .nav-link do Bootstrap (display:block + padding .5rem 1rem).
Sintoma no menu recolhido: ícone e rótulo (inline) quebravam em DUAS linhas — o item
ficava com 57px de altura e 111px de largura numa rail de 68px (era isso que afastava
a dica/tooltip do ícone, além de perder a centralização e o hover). */
.nav-root .submenu-link {
display: flex;
align-items: center;
gap: .55rem;
padding: .45rem .55rem;
border-radius: 6px;
white-space: nowrap;
overflow: hidden;
transition: background .15s;
}
.nav-root .submenu-link:hover {
background: var(--color-hover);
}
.nav-root.collapsed .submenu-link {
justify-content: center;
gap: 0;
padding: var(--mainmenu-padding-y) 0;
}
/* Com o em flex, o .nav-item (filho de um nav com flex-wrap) passaria a assumir a
largura MAX-CONTENT — maior que a rail, cortando o rótulo no menu expandido.
max-width: 100% mantém o item exatamente na largura da área (é no-op quando já é 100%). */
.nav-root .nav-item {
max-width: 100%;
}
/* No drawer (mobile) o colapso é ignorado: rótulo sempre à vista */
@media (max-width: 991.98px) {
.nav-root.collapsed .submenu-link {
justify-content: flex-start;
gap: .55rem;
padding: .5rem .55rem;
}
}
/* ─── 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));
}*/
/**************************************************/
/* Célula da observação do produto: existe SÓ no card (mobile/tablet) — no desktop
é escondida (o acesso lá é pelo botão ⓘ + dica + modal). */
.td-obs-card {
display: none;
}
@media (max-width: 991.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-bottom: 1px solid var(--es-body-bg-85) !important;
border-radius: 8px !important;
padding: .5rem !important;
box-shadow: 0 1px 4px var(--es-body-bg-20) !important;
height: auto !important;
background-color: var(--body-bg, #fff);
}
.table-cards tbody tr.row-selected {
/* border-left-width: 5px !important; */
border: 1px solid var(--es-body-bg-85) !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: 2px solid var(--body-accent, #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;
}
/* Observação do produto no card: só existe no mobile/tablet (no desktop o acesso
é pelo botão ⓘ). Segue o mesmo recolher/expandir das células secundárias. */
.table-cards td.td-obs-card {
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;
}
.table-cards tbody tr.row-selected td.td-obs-card {
max-height: 600px !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;
}
/* Rodapé de ações do card: vale para a última célula (regra histórica). As células
do card recolhível (.eng-card-foot/.eng-card-hit) e a coluna Var de vidros ficam
de fora — elas têm tratamento próprio. */
.table-cards td:last-child:not(.row-acoes-cell):not(.eng-td-var):not(.eng-card-foot):not(.eng-card-hit) {
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):not(.eng-td-var):not(.eng-card-foot):not(.eng-card-hit) > 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);
}
}
/* ─── Dica (tooltip preto) — o elemento é criado por app.js ───
position:fixed + body: NÃO é cortada pelo overflow do .table-responsive.
Usada em qualquer elemento com o atributo data-dica (texto no próprio atributo). */
.es-dica {
position: fixed;
z-index: 3000;
max-width: min(340px, calc(100vw - 16px));
max-height: 45vh;
overflow: auto;
padding: 0.45rem 0.6rem;
border-radius: 0.45rem;
background: rgba(17, 17, 17, 0.96);
color: #fff;
font-size: 0.8rem;
line-height: 1.35;
white-space: pre-wrap;
word-break: break-word;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
pointer-events: none;
opacity: 0;
transition: opacity .12s ease;
}
.es-dica.es-dica-on { opacity: 1; }
/* Saliência (seta) do lado virado para o alvo. Só quando o alvo pede (data-dica-seta)
e com overflow VISÍVEL — senão o pseudo-elemento seria cortado pelo scroll da caixa.
Usada no NavMenu recolhido, onde o conteúdo é curto (nome do item). */
.es-dica.es-dica-seta { overflow: visible; }
.es-dica.es-dica-seta::before {
content: "";
position: absolute;
width: 10px;
height: 10px;
background: rgba(17, 17, 17, 0.96);
transform: rotate(45deg);
}
/* dica À DIREITA do alvo → seta na borda esquerda */
.es-dica.es-dica-seta.es-dica-right::before {
left: -4px;
top: 50%;
margin-top: -5px;
}
/* dica ACIMA do alvo → seta na borda inferior */
.es-dica.es-dica-seta.es-dica-top::before {
bottom: -4px;
left: 50%;
margin-left: -5px;
}
/* dica ABAIXO do alvo → seta na borda superior */
.es-dica.es-dica-seta.es-dica-bottom::before {
top: -4px;
left: 50%;
margin-left: -5px;
}
.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: 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 | fica fixa em 38px — nunca expande, não afeta outras linhas.
* O wrap usa position:absolute ancorado na | (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
é 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 {
--color: var(--body-accent);
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(--color);
}
.row-acoes-trigger:hover {
/*color: var(--primary-color, #00648C);
background: rgba(0,0,0,.05);*/
color: whitesmoke;
background: var(--color);
}
/* ─── Engenharia card button (mobile) ─── */
.eng-card-btn {
display: none;
}
/* mobile (table-cards): ⋮ no canto superior direito */
@media (max-width: 991.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;
}
/* altura mínima nos cards com Engenharia para não sobrepor ⋮ e ⚙ */
.table-cards tbody tr:has(.eng-card-btn) {
min-height: 95px;
}
/* evita texto sob os botões absolutos no card */
.table-cards tbody tr:has(.eng-card-btn) td:first-child {
padding-right: 45px !important;
}
/* No mobile a observação aparece inteira dentro do card (célula recolhível .td-obs-card),
então o botão ⓘ do grupo de ações não é exibido. */
.table-cards td.row-acoes-cell .row-acoes-wrap .row-acoes-trigger.row-acoes-obs {
display: none !important;
}
/* esconde o botão Engenharia de desktop dentro do wrap no mobile */
.table-cards td.row-acoes-cell .row-acoes-wrap .row-acoes-trigger[title="Engenharia"] {
display: none !important;
}
/* Engenharia no canto inferior direito do card */
.eng-card-btn {
display: flex !important;
align-items: center;
justify-content: center;
position: absolute;
bottom: 7px;
right: 5px;
width: 32px;
height: 32px;
background: color-mix(in srgb, var(--body-fg, #212529) 8%, var(--body-bg, #fff));
color: #e8491d;
border: none;
border-radius: 50%;
z-index: 10;
cursor: pointer;
font-size: .8rem;
padding: 0;
}
/* 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;
}
/* ── Barra de abas da Engenharia com botão "Testar" à direita ── */
.eng-tabbar {
display: flex;
align-items: flex-end;
}
.eng-tabbar .eng-tabs {
flex: 1 1 auto;
min-width: 0;
}
.eng-tabbar .eng-tab-testar {
flex-shrink: 0;
margin: 0 0 6px .5rem;
}
.eng-tabbar::after {
display: none; /* o botão Testar ocupa a ponta direita — sem fade por cima */
}
/* Celular: o "Testar" passa para uma faixa ACIMA das abas */
@media (max-width: 991.98px) {
.eng-tabbar {
flex-wrap: wrap;
align-items: stretch;
}
.eng-tabbar .eng-tabs {
flex: 1 1 100%;
order: 2;
}
.eng-tabbar .eng-tab-testar {
order: 1;
width: 100%;
margin: 0 0 .5rem 0;
}
/* o fade de rolagem é das abas: fica na faixa de baixo, não por cima do botão */
.eng-tabbar::before {
top: auto;
bottom: 4px;
height: 2.6rem;
}
}
/* ─── 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 - 285px);
overflow-y: auto;
}
.imtec-elem-col {
display: flex;
flex-direction: column;
gap: 2px;
padding: 4px;
background: #f0f0f0;
border: 1px solid #ccc;
border-radius: 4px;
max-height: calc(100vh - 285px);
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;
}
/* ─── Imagem Técnica — popover flutuante de propriedades do rótulo (arrastável) ─── */
.imtec-lbl-popover {
position: fixed;
right: 24px;
top: 88px;
z-index: 1075;
width: 340px;
max-width: calc(100vw - 16px);
background: #fff;
border: 1px solid rgba(0,0,0,.18);
border-radius: .5rem;
box-shadow: 0 10px 28px rgba(0,0,0,.28);
}
.imtec-lbl-popover-header {
display: flex;
align-items: center;
gap: .5rem;
padding: .35rem .6rem;
background: #f0f0f0;
border-bottom: 1px solid #ccc;
border-radius: .5rem .5rem 0 0;
user-select: none;
}
.imtec-lbl-popover-body {
padding: .6rem;
max-height: 62vh;
overflow-y: auto;
}
/* ─── Imagem Técnica — cursor quadrado e painel da borracha ─── */
.imtec-eraser-cursor {
position: absolute;
display: none;
pointer-events: none;
background: rgba(211, 211, 211, .35);
border: 1px solid #333333;
outline: 1px solid rgba(255, 255, 255, .85);
box-sizing: border-box;
z-index: 5;
}
.imtec-brush-cursor {
position: absolute;
display: none;
pointer-events: none;
background: #FFFFFF;
border: 1px solid #333333;
outline: 1px solid rgba(255, 255, 255, .85);
border-radius: 50%;
box-sizing: border-box;
z-index: 5;
}
.imtec-tool-btn svg {
display: block;
}
.imtec-rot-btn svg {
display: block;
}
.imtec-icon-diamond {
display: inline-block;
transform: rotate(45deg);
}
.imtec-eraser-popover {
position: fixed;
z-index: 1075;
width: 212px;
background: #fff;
border: 1px solid rgba(0,0,0,.18);
border-radius: .5rem;
box-shadow: 0 10px 28px rgba(0,0,0,.28);
}
.imtec-eraser-popover-header {
display: flex;
align-items: center;
gap: .5rem;
padding: .35rem .6rem;
background: #f0f0f0;
border-bottom: 1px solid #ccc;
border-radius: .5rem .5rem 0 0;
user-select: none;
}
/* ─── Imagem Técnica — figuras flutuantes (recortes/furos do vidro) ─── */
.imtec-figura {
position: absolute;
box-sizing: border-box;
pointer-events: auto;
}
.imtec-figura-editing {
cursor: move;
}
.imtec-figura-editing:hover {
outline: 2px solid rgba(0,120,215,.6);
outline-offset: 1px;
}
.imtec-figura-selected {
outline: 2px solid #0078d7;
outline-offset: 1px;
}
.imtec-figura-static,
.imtec-figura.imtec-no-pointer {
pointer-events: none;
}
/* ─── Elementos travados (cadeado): não movem, não são capturados pela seleção nem empurrados ─── */
.imtec-figura.imtec-travado,
.imtec-label.imtec-travado,
.imtec-cota.imtec-travado {
cursor: default;
}
.imtec-pop-fieldset {
border: 0;
margin: 0;
padding: 0;
min-inline-size: 0;
}
/* Popover com elemento travado: mensagem + botão Destravar (controles ficam ocultos) */
.imtec-pop-locked {
padding: 1.1rem .8rem;
text-align: center;
}
/* ─── Imagem Técnica — elemento Cota (medida) ─── */
.imtec-cota {
position: absolute;
box-sizing: border-box;
pointer-events: auto;
}
.imtec-cota-editing {
cursor: move;
}
.imtec-cota-editing:hover {
outline: 2px solid rgba(0,120,215,.6);
outline-offset: 1px;
}
.imtec-cota-selected {
outline: 2px solid #0078d7;
outline-offset: 1px;
}
.imtec-cota-static,
.imtec-cota.imtec-no-pointer {
pointer-events: none;
}
.imtec-cota-popover {
position: fixed;
right: 24px;
top: 88px;
z-index: 1075;
width: 340px;
max-width: calc(100vw - 16px);
background: #fff;
border: 1px solid rgba(0,0,0,.18);
border-radius: .5rem;
box-shadow: 0 10px 28px rgba(0,0,0,.28);
}
.imtec-cota-popover-header {
display: flex;
align-items: center;
gap: .5rem;
padding: .35rem .6rem;
background: #f0f0f0;
border-bottom: 1px solid #ccc;
border-radius: .5rem .5rem 0 0;
user-select: none;
}
.imtec-cota-popover-body {
padding: .6rem;
max-height: 62vh;
overflow-y: auto;
}
.imtec-fig-popover {
position: fixed;
right: 24px;
top: 88px;
z-index: 1075;
width: 340px;
max-width: calc(100vw - 16px);
background: #fff;
border: 1px solid rgba(0,0,0,.18);
border-radius: .5rem;
box-shadow: 0 10px 28px rgba(0,0,0,.28);
}
.imtec-fig-popover-header {
display: flex;
align-items: center;
gap: .5rem;
padding: .35rem .6rem;
background: #f0f0f0;
border-bottom: 1px solid #ccc;
border-radius: .5rem .5rem 0 0;
user-select: none;
}
.imtec-fig-popover-body {
padding: .6rem;
max-height: 62vh;
overflow-y: auto;
}
/* ─── Pontos de redimensionamento da área útil (grips) ─── */
/* ─── Pontos de redimensionamento da área útil (grips) ─── */
.imtec-size-grip {
position: absolute;
width: 14px;
height: 14px;
background: radial-gradient(circle at 35% 35%, #4da3ff, #0078d7 70%);
border: 2px solid #fff;
border-radius: 50%;
box-shadow: 0 0 3px rgba(0,0,0,.55);
z-index: 3;
touch-action: none;
transform: scale(var(--imtec-grip-scale, 1));
}
.imtec-size-grip:hover {
background: radial-gradient(circle at 35% 35%, #6fb6ff, #0064b8 70%);
}
.imtec-grip-x { right: -8px; top: 50%; margin-top: -7px; cursor: ew-resize; }
.imtec-grip-y { bottom: -8px; left: 50%; margin-left: -7px; cursor: ns-resize; }
.imtec-grip-xy { right: -8px; bottom: -8px; cursor: nwse-resize; }
/* Alça de redimensionamento dos elementos (figuras/cotas) — só no elemento selecionado */
.imtec-elem-grip {
position: absolute;
right: -7px;
bottom: -7px;
width: 12px;
height: 12px;
background: radial-gradient(circle at 35% 35%, #4da3ff, #0078d7 70%);
border: 2px solid #fff;
border-radius: 50%;
box-shadow: 0 0 3px rgba(0,0,0,.55);
cursor: nwse-resize;
z-index: 6;
touch-action: none;
user-select: none;
transform: scale(var(--imtec-grip-scale, 1));
}
.imtec-elem-grip:hover {
background: radial-gradient(circle at 35% 35%, #6fb6ff, #0064b8 70%);
}
/* Badge do tamanho durante o arrasto (posicionado em screen-space pelo JS) */
.imtec-resize-badge {
position: fixed;
z-index: 1300;
background: rgba(0,0,0,.75);
color: #fff;
font-size: 12px;
padding: 2px 8px;
border-radius: 4px;
pointer-events: none;
white-space: nowrap;
}
/* ─── 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-dodgerblue {
--color: color-mix(in srgb, dodgerblue 80%, black);
color: #fff;
background: linear-gradient(dodgerblue,var(--color));
border: none;
}
.btn-dodgerblue:hover,
.btn-dodgerblue:focus {
background: linear-gradient(var(--color),dodgerblue);
border-color: dodgerblue;
}
.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,
.btn-icon .fab {
color: currentColor;
}
/* Ícones de marca (ex.: WhatsApp) são desenhados mais finos — compensa o tamanho visual. */
.btn-icon .fab { font-size: 1.2em; }
.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;
/* sem isto, uma logo mais larga que o card nao encolhe: o margin:auto vira 0
e a imagem vaza para a direita (parecia "descentralizada" no mobile) */
max-width: 100%;
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;
}
/* Olhinho do campo senha (segurar para revelar) */
.auth-senha > .form-control { padding-right: 2.9rem; }
/* o Edge/Chrome tem o proprio "revelar"; escondemos para nao ficar com dois olhos */
.auth-senha > .form-control::-ms-reveal,
.auth-senha > .form-control::-ms-clear { display: none; }
.auth-eye {
position: absolute;
top: 0;
right: 0.2rem;
height: calc(3.5rem + 2px);
width: 2.6rem;
display: flex;
align-items: center;
justify-content: center;
border: 0;
background: transparent;
color: #8a949c;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
touch-action: manipulation;
}
.auth-eye:hover,
.auth-eye.ativo { color: var(--es-primary); }
.auth-eye:focus { outline: none; }
/* Campos do login com cores FIXAS — não seguem o tema claro/escuro do usuário.
O .form-control global usa --body-bg/--body-fg (gravados por BodyTheme.apply
conforme o tema salvo), o que deixava os campos escuros quando o tema era escuro. */
.auth-wrapper {
/* token derivado do tema: afeta o placeholder e os textos secundários do card */
--bs-secondary-color: #949698;
}
.auth-wrapper .form-control,
.auth-wrapper .form-select {
background-color: #fafafa;
color: #212529;
border-color: #b1b3b4;
}
.auth-wrapper .form-control:focus,
.auth-wrapper .form-select:focus {
background-color: #fafafa;
color: #212529;
}
/* Chrome/Edge pintam o autofill por conta própria (fundo e texto) */
.auth-wrapper .form-control:-webkit-autofill,
.auth-wrapper .form-control:-webkit-autofill:hover {
-webkit-text-fill-color: #212529;
box-shadow: 0 0 0 100px #fafafa inset;
}
.auth-wrapper .form-control:-webkit-autofill:focus {
-webkit-text-fill-color: #212529;
box-shadow: 0 0 0 100px #fafafa inset, 0 0 0 0.25rem rgba(0, 100, 140, 0.25);
}
/* label flutuante: o Bootstrap usa a cor do body, que também segue o tema */
.auth-wrapper .form-floating > label { color: #212529; }
.auth-wrapper .form-floating > .form-control:focus ~ label,
.auth-wrapper .form-floating > .form-control:not(:placeholder-shown) ~ label {
color: rgba(33, 37, 41, 0.65);
}
.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;
}
/* -- Thumb nas tabelas de Engenharia (FormularioItemOpo) — fundo arredondado sem borda -- */
.eng-fixed-table .thumb-wrap {
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
background: #fff;
overflow: hidden;
}
/* -- 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: 991.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;
}
}
/* Fundo da linha expandida (detalhes) — o div interno não tem mais background inline */
.orc-item-detalhe-row td,
.orc-item-detalhe-row td > div {
background-color: color-mix(in srgb, var(--body-bg) 95%, var(--body-fg));
}
.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-btns {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: .5rem;
width: 100%;
justify-content: flex-end;
}
.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: 991.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: color-mix(in srgb, var(--body-bg) 98%, var(--body-fg));
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: 991.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: 991.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); }
}
/* ===== Modal Tipologias aberto de DENTRO de outro modal =====
O Tipologias.razor declara z-index 1080 INLINE (.modal fade show d-block) e o
.modal-configurador do configurador de item é position:fixed com z-index 1099 e fundo
opaco — o modal abria atrás dele e o botão "Alterar imagem" parecia não fazer nada.
O host (div.cfg-tipologias-host, em FormularioItemOpo.razor) + !important (obrigatório
para vencer o style inline) sobem o seletor acima do configurador. */
.cfg-tipologias-host .modal {
z-index: 1210 !important;
}
/* O popover de exclusão e o editor de imagem do Tipologias são IRMÃOS do .modal dentro
do host (1099/1100 em app.css) — sem isto ficariam atrás do modal agora em 1210.
Especificidade maior que a regra original, sem precisar de !important. */
.cfg-tipologias-host .excluir-overlay {
z-index: 1211;
}
.cfg-tipologias-host .excluir-popover {
z-index: 1212;
}
/* 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; }
/* ===== Adicionar Item — modal padrão + cards ===== */
.add-item-modal .modal-header {
border-bottom: 1px solid color-mix(in srgb, var(--body-fg, #212529) 10%, transparent);
padding: .6rem 1rem;
}
.add-item-modal .modal-title {
font-size: .95rem;
font-weight: 700;
}
.add-item-section-title {
font-size: .68rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--body-accent, #00648C);
margin-bottom: .45rem;
}
.add-item-card {
display: flex;
align-items: center;
gap: .8rem;
width: 100%;
padding: .85rem 1rem;
border: 1px solid color-mix(in srgb, var(--body-fg, #212529) 14%, transparent);
border-radius: 10px;
background: var(--body-bg, #fff);
color: var(--body-fg, #212529);
text-align: left;
cursor: pointer;
transition: border-color .15s ease, box-shadow .15s ease, transform .06s ease;
}
.add-item-card:hover {
border-color: var(--primary-color, #00648C);
box-shadow: 0 4px 14px rgba(0,0,0,.12);
}
.add-item-card:active {
transform: scale(.985);
}
.add-item-card-icon {
font-size: 1.35rem;
width: 40px;
height: 40px;
border-radius: 9px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: color-mix(in srgb, var(--primary-color, #00648C) 12%, transparent);
color: var(--primary-color, #00648C);
}
.add-item-card-body {
display: flex;
flex-direction: column;
min-width: 0;
flex: 1;
}
.add-item-card-title {
font-weight: 700;
font-size: .9rem;
}
.add-item-card-desc {
font-size: .72rem;
color: var(--body-fg, #212529);
opacity: .65;
}
.add-item-card-arrow {
color: var(--body-fg, #212529);
opacity: .35;
font-size: .8rem;
flex-shrink: 0;
}
.add-item-card-secondary .add-item-card-icon {
background: color-mix(in srgb, #0d9488 12%, transparent);
color: #0d9488;
}
.add-item-card-small {
flex-direction: column;
align-items: center;
gap: .4rem;
text-align: center;
padding: 1rem .5rem;
}
.add-item-card-small .add-item-card-icon {
font-size: 1.15rem;
width: 34px;
height: 34px;
}
/* ── Engenharia: tabela com larguras fixas de coluna ── */
.eng-fixed-table {
table-layout: fixed;
width: 100%;
}
/* ── Engenharia mobile: cards accordion (imagem + nome, footer descrição + chevron) ── */
/* desktop: chevron de expandir oculto */
.eng-fixed-table td[data-label="Descrição"] .eng-card-chevron-btn {
display: none;
}
@media (max-width: 991.98px) {
/* Card inteiro clicável para expandir/recolher */
.eng-fixed-table tbody tr {
cursor: pointer;
}
/* Topo do card: badge + imagem + nome na mesma linha (sem label no nome) */
.eng-fixed-table td:is([data-label=""],[data-label="Perfil"],[data-label="Acessório"],[data-label="Código"],[data-label="Vidro"],[data-label="Vidro / Chapa"]) {
display: inline-flex !important;
align-items: center;
vertical-align: middle;
width: auto !important;
padding: 0 .2rem 0 0 !important;
margin: 0 !important;
}
.eng-fixed-table td:is([data-label="Perfil"],[data-label="Acessório"],[data-label="Código"],[data-label="Vidro"],[data-label="Vidro / Chapa"]) {
flex: 1 1 auto;
min-width: 0;
padding: 0 !important;
overflow: hidden;
}
.eng-fixed-table td:is([data-label="Perfil"],[data-label="Acessório"],[data-label="Código"],[data-label="Vidro"],[data-label="Vidro / Chapa"])::before {
display: none !important;
}
.eng-fixed-table td:is([data-label="Perfil"],[data-label="Acessório"],[data-label="Código"],[data-label="Vidro"],[data-label="Vidro / Chapa"]) > * {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.eng-fixed-table td:is([data-label="Perfil"],[data-label="Acessório"],[data-label="Código"],[data-label="Vidro"],[data-label="Vidro / Chapa"]) input,
.eng-fixed-table td:is([data-label="Perfil"],[data-label="Acessório"],[data-label="Código"],[data-label="Vidro"],[data-label="Vidro / Chapa"]) select {
width: 100%;
min-width: 0;
}
/* Detalhes ocultos por padrão — revelados quando o card está aberto */
.eng-fixed-table td:is([data-label="Fórmula"],[data-label="Medida"],[data-label="Qtde"],[data-label="Corte"],[data-label="Largura"],[data-label="Altura"],[data-label="Condição"],[data-label="Ações"]) {
display: block !important;
max-height: 0 !important;
overflow: hidden !important;
opacity: 0;
padding: 0 !important;
margin: 0 !important;
transition: max-height .25s cubic-bezier(.4,0,.2,1), opacity .2s ease, padding .2s ease !important;
}
.eng-fixed-table tbody tr.eng-card-aberta td:is([data-label="Fórmula"],[data-label="Medida"],[data-label="Qtde"],[data-label="Corte"],[data-label="Largura"],[data-label="Altura"],[data-label="Condição"],[data-label="Ações"]) {
max-height: 200px !important;
opacity: 1 !important;
padding: .15rem 0 .15rem .75rem !important;
}
/* Footer: descrição (sem label) + chevron */
.eng-fixed-table td[data-label="Descrição"] {
display: flex !important;
align-items: center;
gap: .5rem;
padding-top: .45rem !important;
margin-top: .3rem;
border-top: 1px solid rgba(0,0,0,.08) !important;
}
.eng-fixed-table td[data-label="Descrição"]::before {
display: none !important;
}
.eng-fixed-table td[data-label="Descrição"] .eng-desc-text {
order: 2;
flex: 1 1 auto;
min-width: 0;
font-size: .7rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.eng-fixed-table td[data-label="Descrição"] .eng-desc-text > * {
width: 100%;
min-width: 0;
}
.eng-fixed-table tr.eng-card-aberta td[data-label="Descrição"] .eng-desc-text {
white-space: normal;
}
.eng-fixed-table td[data-label="Descrição"] .eng-card-chevron-btn {
order: 1;
display: inline-flex !important;
align-items: center;
justify-content: center;
flex-shrink: 0;
border: none;
background: transparent;
color: var(--body-accent, #00648C);
padding: .15rem .3rem;
cursor: pointer;
}
.eng-fixed-table td[data-label="Descrição"] .eng-card-chevron-btn .eng-card-chevron {
font-size: .65rem;
transition: transform .25s ease;
}
.eng-fixed-table tr.eng-card-aberta td[data-label="Descrição"] .eng-card-chevron-btn .eng-card-chevron {
transform: rotate(180deg);
}
}
/* ── 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: 991.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: #ffffffdb;
font-size: 1.1rem;
cursor: pointer;
border-radius: 6px;
margin-right: 4px;
margin-bottom: 2px;
flex-shrink: 0;
transition: background .15s;
}
.header-nav-toggle:hover {
background: rgba(255,255,255,.12);
}
/* ─── Seletor de cor circular (Personalizar capa/cabeçalho/rodapé) ─── */
input[type="color"].cor-round {
width: 31px;
height: 31px;
padding: 0;
border-radius: 50%;
overflow: hidden;
cursor: pointer;
}
input[type="color"].cor-round::-webkit-color-swatch-wrapper {
padding: 0;
}
input[type="color"].cor-round::-webkit-color-swatch {
border: none;
border-radius: 50%;
}
/* ═══ Engenharia de Módulos (EngenhariaModulos.razor) ═══ */
/* Faixa "Definição dos Parâmetros" (fachadas): ícone + descrições + botão */
.eng-fachada-banner {
background: #FFE0C0;
border: 1px solid #d9a05f;
border-radius: .375rem;
padding: .5rem .65rem;
margin-bottom: .6rem;
}
.eng-fachada-banner-icon { color: #d97706; font-size: 1.4rem; }
.eng-fachada-banner-texto { min-width: 0; }
.eng-fachada-btn { background: #008080; color: #fff; white-space: nowrap; }
.eng-fachada-btn:hover { background: #006666; color: #fff; }
@media (max-width: 575.98px) {
/* estreito: ícone + textos na 1ª linha; botão alinhado à direita na 2ª */
.eng-fachada-banner { flex-wrap: wrap; }
.eng-fachada-banner-texto { flex: 1 1 calc(100% - 2rem); }
}
/* Seletor de grupo por módulo (miniatura da tipologia + modal de opções) */
.eng-grupo-cell { background: transparent; border: 0; padding: 0; line-height: 0; cursor: pointer; }
.eng-grupo-cell:hover .eng-grupo-thumb { outline: 2px solid rgba(0,120,215,.55); outline-offset: 1px; }
.eng-grupo-thumb { display: block; background: #fff; border-radius: 4px; }
.eng-grupo-opcao {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: .3rem;
width: 100%;
background: #fff;
border: 1px solid #e3e3e3;
border-radius: .5rem;
padding: .5rem;
cursor: pointer;
}
.eng-grupo-opcao:hover { border-color: #7db1e0; box-shadow: 0 2px 8px rgba(0,0,0,.10); }
.eng-grupo-opcao.selected { border-color: #0078d7; box-shadow: 0 0 0 2px rgba(0,120,215,.25); }
.eng-grupo-thumb-lg { display: block; background: #fff; border-radius: 4px; }
.eng-grupo-legenda { display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.15; font-size: .78rem; }
.eng-grupo-selo {
position: absolute;
top: 6px;
right: 6px;
width: 20px;
height: 20px;
border-radius: 50%;
background: #0078d7;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: .65rem;
}
@media (max-width: 991.98px) {
/* tabela de módulos sem botão ⋮ — cancela o padding-right reservado pelo table-cards */
.eng-mod-table tbody tr {
padding: .4rem !important;
}
.eng-mod-collapse {
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;
}
tr.row-selected .eng-mod-collapse {
max-height: 300px !important;
opacity: 1 !important;
padding: .15rem 0 !important;
}
.eng-mod-collapse input.form-control {
width: 100% !important;
min-width: unset !important;
}
}
@media (min-width: 992px) {
.eng-mod-input { min-width: 80px; }
}
/* ==================== Engenharia · aba Perfis — larguras das colunas ====================
Fonte única das larguras usadas nos 3 de EngenhariaPerfis.razor
(tabela do cabeçalho, tabela editável e listas SOMENTE-LEITURA dos módulos).
As três precisam ser idênticas — mudando aqui, todas continuam alinhadas.
Critério: campos que aceitam valores condicionais/fórmulas (Perfil, Medida/Fórmula e
Qtde) ficam maiores. Corte tem valores de tamanho fixo (90/90, 45/45, 45/90, 90/45) →
largura FIXA em px (o select renderiza 88,4px; 96px dá a folga do padding). Descrição e
Condição têm texto curto → menores.
Medido no navegador (table-layout: fixed): misturar px com % exige que as % somem 100%
— aí o navegador desconta os 96px e redistribui o resto proporcionalmente (sem estouro).
A Condição hospeda a linha com os 4 botões de ação (124,1px): no min-width de 1000px ela
fica com 137,1px de conteúdo (folga 13px); abaixo disso o .table-responsive rola na
horizontal em vez de comprimir a coluna e quebrar os botões. */
.eng-c-perfil { width: 28%; }
.eng-c-medida { width: 28%; }
.eng-c-qtde { width: 14%; }
.eng-c-corte { width: 96px; }
.eng-c-descricao { width: 14%; }
.eng-c-condicao { width: 16%; }
.eng-tabela-perfis { min-width: 1000px; }
/* ==================== Engenharia · aba Acessórios — larguras das colunas ====================
Fonte única das larguras usadas nos 3 de EngenhariaAcessorios.razor
(cabeçalho, tabela editável e listas SOMENTE-LEITURA dos módulos) — as três precisam ser
idênticas para o cabeçalho não desalinhar do corpo.
Critério: Cód. Acessório e Qtde aceitam cadeia condicional/fórmula → grandes e do MESMO
tamanho; Descrição é curta → menor.
A Condição é FIXA em px porque hospeda a linha com os 4 botões de ação (124,1px medidos na
aba Perfis) e não pode encolher; as % somam 100% para o navegador descontar os 150px e
redistribuir o resto proporcionalmente (mesma regra do bloco de Perfis acima).
No min-width de 900px: Código/Qtde 300px, Descrição 150px, Condição 150px — abaixo disso o
.table-responsive rola na horizontal em vez de comprimir as colunas. */
.eng-ca-codigo { width: 40%; }
.eng-ca-qtde { width: 40%; }
.eng-ca-descricao { width: 20%; }
.eng-ca-condicao { width: 150px; }
.eng-tabela-acessorios { min-width: 900px; }
/* ── Listas da Engenharia: fonte um pouco menor (≈12px) nos CAMPOS das colunas e nos VALORES das
listas somente leitura (módulos), em todas as abas.
- ATENÇÃO: neste projeto o root é 15.2px (html em 95%), então 0.75rem daria 11.4px — valor
fracionário, que é o que deixa o texto com aspecto "borrado". 0.79rem = 12.0px inteiro.
- em rem (e não em) para não compor com o .small do Bootstrap (que é relativo);
- não mexe em altura/padding, no peso da fonte nem usa transform. */
.eng-tabela-perfis :is(input.form-control, select.form-select, textarea.form-control),
.eng-tabela-acessorios :is(input.form-control, select.form-select, textarea.form-control),
.eng-tabela-vidros :is(input.form-control, select.form-select, textarea.form-control),
.eng-tabela-variaveis :is(input.form-control, select.form-select, textarea.form-control),
.eng-mod-table :is(input.form-control, select.form-select, textarea.form-control),
.eng-tabela-perfis td.small,
.eng-tabela-acessorios td.small,
.eng-tabela-vidros td,
.eng-tabela-variaveis td,
.eng-mod-table td {
font-size: .79rem;
}
/* Rótulo do modo celular (o data-label desenhado pelo .table-cards) acompanha a fonte menor:
0.75em do valor da célula (12px × 0.75 = 9px). */
.table-cards.eng-tabela-perfis td[data-label]::before,
.table-cards.eng-tabela-acessorios td[data-label]::before,
.table-cards.eng-tabela-vidros td[data-label]::before,
.table-cards.eng-tabela-variaveis td[data-label]::before,
.table-cards.eng-mod-table td[data-label]::before {
font-size: .75em;
}
/* O min-width existe para a tabela rolar na horizontal em telas estreitas de desktop, mas no modo
cartão (celular) ele tinha de ser anulado — sem isto a tabela continuava com 900/1000px de
largura e os controles "passavam da tela". */
@media (max-width: 991.98px) {
.eng-tabela-perfis,
.eng-tabela-acessorios,
.eng-tabela-vidros,
.eng-tabela-variaveis,
.eng-mod-table { min-width: 0; }
}
/* ── Grupos Permitidos do vidro/chapa (checklist aberto pelo campo somente leitura) ── */
.gm-campo { cursor: pointer; }
.gm-lista { max-height: 240px; overflow-y: auto; }
/* Coluna Var da engenharia de vidros/chapas: é a última e estreita → menos padding interno. */
.eng-td-var { padding-inline: .15rem !important; }
/* ==================== Engenharia · card recolhível do celular ====================
Cada linha vira um card: por padrão aparecem só o "cabeçalho" (1ª célula, sem .eng-collapse)
e o RODAPÉ. O rodapé tem o chevron (abre/recolhe, com giro animado) e os botões de ação da
linha; a camada .eng-card-hit cobre a área vazia do card e alterna com um toque (os campos e
os botões ficam acima dela). As duas células só existem no modo cartão — no desktop ficam
display:none, então a grade continua com as mesmas colunas e os mesmos botões na coluna
Condição (a cópia no rodapé é escondida com .eng-acoes-linha). Um card por vez (acordeão),
reaproveitando o _selectedCod / row-selected da grade. */
.eng-card-hit,
.eng-card-foot,
.eng-card-titulo { display: none; }
@media (max-width: 991.98px) {
/* linha que recebeu o rodapé (a linha do editor expandido, por exemplo, fica intacta) */
.table-cards tbody tr:has(> td.eng-card-foot) {
position: relative;
padding-bottom: 2.75rem !important;
}
/* campos secundários: só com o card aberto (a 1ª célula é o cabeçalho do card e fica sempre) */
.table-cards.eng-tabela-perfis tbody tr:not(.row-selected) > td.eng-collapse:not(:first-child),
.table-cards.eng-tabela-acessorios tbody tr:not(.row-selected) > td.eng-collapse:not(:first-child),
.table-cards.eng-tabela-vidros tbody tr:not(.row-selected) > td.eng-collapse:not(:first-child) { display: none !important; }
/* campos e botões acima da camada de toque (as duas células do card ficam de fora: elas são
posicionadas de propósito logo abaixo e, sem o :not(), esta regra venceria por especificidade) */
.table-cards tbody tr:has(> td.eng-card-foot) > td:not(.eng-card-hit):not(.eng-card-foot) {
position: relative;
z-index: 1;
}
.table-cards tbody tr > td.eng-card-hit {
display: block !important;
position: absolute;
inset: 0;
z-index: 0;
padding: 0 !important;
border: none !important;
}
.table-cards tbody tr > td.eng-card-foot {
display: flex !important;
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
align-items: center;
justify-content: space-between;
gap: .35rem;
padding: .3rem .55rem !important;
border: none !important;
border-top: 1px solid rgba(0,0,0,.08) !important;
background: var(--body-bg, #fff);
}
/* a cópia dos botões que continua na coluna Condição não aparece no celular */
.table-cards .eng-acoes-linha { display: none !important; }
/* ── Título do card de VIDROS/CHAPAS (só recolhido) ──────────────────────────────────────
A 1ª coluna é a Largura (um número), que não identifica a linha. Recolhido, ela dá lugar
ao título: a Descrição em negrito + um resumo (medidas · variável EV). Expandido volta ao
normal, com os campos. */
.table-cards.eng-tabela-vidros tbody tr:not(.row-selected) .eng-card-titulo { display: block; }
.table-cards.eng-tabela-vidros tbody tr:not(.row-selected) > td:first-child .input-group { display: none !important; }
.eng-card-titulo-desc {
display: block;
font-weight: 600;
line-height: 1.15;
}
.eng-card-titulo-resumo {
display: block;
font-size: .72rem;
line-height: 1.1;
color: color-mix(in srgb, var(--body-fg, #212529) 62%, var(--body-bg, #fff));
}
/* chevron: mesmo ícone dos cabeçalhos da engenharia, girando ao abrir */
.eng-card-chevron { transition: transform .2s ease; }
.table-cards tbody tr.row-selected .eng-card-chevron { transform: rotate(-180deg); }
}
/* ==================== Engenharia · cores das partes da expressão ====================
Paleta compartilhada pelo modal de busca ("Resultado" e campos do construtor) e pelo campo
colorido do editor expandido (.cc-campo). Cada matiz é misturada com var(--body-fg) para manter
o contraste nos três modos de corpo do tema (Claro/Médio/Escuro); para aproximar a cor do texto
basta aumentar a % do body-fg. Fica AQUI (e não no