* { margin:0; padding:0; box-sizing:border-box; }
/* Equivale a deixar o navegador em zoom 80% por padrão, sem precisar
apertar Ctrl+- toda vez — cabe mais conteúdo na tela em telas
grandes. Só em telas menores (celular) mantém tamanho normal,
senão o texto fica pequeno demais pra usar no chão de fábrica. */
@media (min-width:768px) {
html { zoom:80%; }
}
body { font-family:'Inter',system-ui,-apple-system,sans-serif; background:#f8fafc; color:#1e293b; -webkit-font-smoothing:antialiased; }
:root {
--dbn-blue:#1a3b5c; --dbn-blue-deep:#0f2740; --dbn-orange:#f47920; --dbn-orange-deep:#d4650f;
--dbn-orange-light:#fef3e8; --dbn-blue-light:#e8edf3;
/* Texto que usa a cor azul da marca (títulos de card, abas,
badges) — igual a --dbn-blue no claro, mas clareado no escuro
(ver :root.dark abaixo). Continua separado de --dbn-blue
porque essa também é usada como FUNDO sólido de botão com
texto branco em cima (ex.: aba ativa) — clarear ela também
quebraria esses botões. */
--dbn-blue-text:var(--dbn-blue);
--dbn-shadow-sm:0 1px 2px rgba(15,39,64,.06);
--dbn-shadow-md:0 8px 24px rgba(15,39,64,.08);
--dbn-shadow-lg:0 20px 48px rgba(15,39,64,.16);
}
h1,h2,h3,h4 { letter-spacing:-0.01em; }
.brand-mark { position:relative; width:52px; height:52px; border-radius:12px; background:linear-gradient(160deg,#f6873f 0%,var(--dbn-orange) 45%,var(--dbn-orange-deep) 100%); box-shadow:var(--dbn-shadow-md); display:flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden; }
.brand-mark::before { content:''; position:absolute; width:140%; height:22%; background:rgba(255,255,255,.22); top:18%; left:-20%; transform:rotate(-24deg); }
.brand-mark span { position:relative; z-index:1; color:#fff; font-weight:800; font-size:1.05rem; letter-spacing:-0.02em; font-family:Arial,Helvetica,sans-serif; }
.brand-mark.lg { width:76px; height:76px; border-radius:18px; }
.brand-mark.lg span { font-size:1.5rem; }
.brand-mark.sm { width:38px; height:38px; border-radius:9px; }
.brand-mark.sm span { font-size:.78rem; }
.brand-mark.sm::before { height:20%; top:16%; }
.brand-pattern { background-image:repeating-linear-gradient(-42deg,rgba(255,255,255,.05) 0 2px,transparent 2px 26px); }
.field-label { font-size:.72rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:#94a3b8; display:block; margin-bottom:6px; }
.input-field { width:100%; border:1.5px solid #e2e8f0; border-radius:12px; padding:12px 16px; font-size:.95rem; outline:none; transition:border-color .15s,box-shadow .15s; background:#fff; }
.input-field:focus { border-color:var(--dbn-orange); box-shadow:0 0 0 4px var(--dbn-orange-light); }
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:#f1f1f1; border-radius:10px; }
::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:10px; }
::-webkit-scrollbar-thumb:hover { background:#94a3b8; }
.kanban-col { min-width:280px; max-width:100%; scrollbar-width:thin; display:flex; flex-direction:column; max-height:calc(100vh - 180px); overflow-y:auto; }
/* Cabeçalho da coluna (ex.: "Montagem Caixa") fixo no topo ao rolar
— a versão anterior desse "grudado" (position:sticky) tinha
cantos arredondados; como o card por trás é retangular, os
cantos arredondados do cabeçalho deixavam o card "vazar" bem
ali nos cantos ao rolar. Sem arredondar (retângulo cheio, borda a
borda) resolve isso — o "top" negativo compensa exatamente o
padding da coluna, senão sobrava uma fresta no topo ao grudar. */
.kanban-col > div:first-child {
position:sticky; top:-0.75rem; z-index:2;
background:#f8fafc; box-shadow:0 2px 4px rgba(15,39,64,.06);
margin:-0.75rem -0.75rem 0.75rem; padding:0.75rem 0.75rem 0.5rem;
}
@media (min-width:640px) {
.kanban-col { min-width:300px; }
.kanban-col > div:first-child { top:-1rem; margin:-1rem -1rem 0.75rem; padding:1rem 1rem 0.5rem; }
}
@media (min-width:1024px) { .kanban-col { min-width:320px; } }
.kanban-filtros { display:flex; flex-wrap:wrap; align-items:center; gap:10px; background:#fff; border:1px solid #e9edf2; border-radius:12px; padding:10px 12px; margin-bottom:16px; }
.kf-search { position:relative; flex:1 1 220px; min-width:180px; }
.kf-search-icon { position:absolute; left:12px; top:50%; transform:translateY(-50%); font-size:.8rem; opacity:.5; pointer-events:none; }
.kf-search-input { width:100%; border:1.5px solid #e2e8f0; border-radius:10px; padding:8px 12px 8px 32px; font-size:.85rem; outline:none; transition:border-color .15s,box-shadow .15s; }
.kf-search-input:focus { border-color:var(--dbn-orange); box-shadow:0 0 0 3px var(--dbn-orange-light); }
.kf-clear { background:transparent; border:none; color:#94a3b8; font-size:.78rem; font-weight:600; cursor:pointer; padding:6px 8px; white-space:nowrap; }
.kf-clear:hover { color:#475569; }
.kf-filtro-wrap { position:relative; }
.kf-filtro-btn { display:inline-flex; align-items:center; gap:6px; background:#fff; border:1.5px solid #e2e8f0; border-radius:10px; padding:7px 14px; font-size:.85rem; font-weight:600; color:#475569; cursor:pointer; transition:border-color .15s,color .15s; }
.kf-filtro-btn:hover { border-color:var(--dbn-blue); color:var(--dbn-blue-text); }
.kf-filtro-btn.active { border-color:var(--dbn-orange); color:var(--dbn-orange-deep); background:var(--dbn-orange-light); }
.kf-filtro-badge { background:var(--dbn-orange); color:#fff; font-size:.66rem; font-weight:700; padding:1px 7px; border-radius:99px; }
.kf-filtro-overlay { position:fixed; inset:0; z-index:39; background:transparent; }
.kf-filtro-panel { position:absolute; top:calc(100% + 8px); right:0; z-index:40; background:#fff; border:1px solid #e9edf2; border-radius:14px; box-shadow:var(--dbn-shadow-lg); padding:16px; width:280px; display:flex; flex-direction:column; gap:14px; max-height:80vh; overflow-y:auto; }
.kf-filtro-panel.kf-filtro-panel-wide { width:560px; max-width:calc(100vw - 32px); }
.kf-filtro-data-row { border-top:1px solid #f1f5f9; padding-top:12px; }
.kf-filtro-row { display:flex; flex-direction:column; gap:6px; }
.kf-filtro-label { font-size:.7rem; font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:.04em; }
.kf-filtro-mov { display:flex; flex-direction:column; gap:6px; }
.kf-filtro-actions { display:flex; justify-content:space-between; align-items:center; padding-top:10px; border-top:1px solid #f1f5f9; }
.kf-filtro-aplicar { background:var(--dbn-blue); color:#fff; border:none; border-radius:8px; padding:7px 16px; font-size:.8rem; font-weight:600; cursor:pointer; }
.kf-filtro-aplicar:hover { background:var(--dbn-blue-deep); }
.toast { position:fixed; bottom:24px; right:24px; background:#10b981; color:#fff; padding:10px 20px; border-radius:12px; font-size:.875rem; font-weight:500; box-shadow:0 4px 12px rgba(0,0,0,.15); animation:fadeOut 3s forwards; z-index:1000; }
.toast-error { background:#ef4444; }
@keyframes fadeOut { 0%{opacity:1;transform:translateY(0)}70%{opacity:1}100%{opacity:0;visibility:hidden;transform:translateY(20px)} }
.loading { display:flex; justify-content:center; align-items:center; height:100vh; font-size:1.125rem; color:#64748b; }
.error-screen { background:#fee; color:#c00; padding:24px; margin:24px; border-radius:12px; border:1px solid #fcc; white-space:pre-wrap; }
.sidebar-overlay { position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:40; backdrop-filter:blur(2px); }
.sidebar-panel { position:fixed; top:0; left:0; bottom:0; width:280px; background:#fff; z-index:50; transform:translateX(-100%); transition:transform .3s cubic-bezier(.4,0,.2,1); box-shadow:4px 0 20px rgba(0,0,0,.08); display:flex; flex-direction:column; }
.sidebar-panel.open { transform:translateX(0); }
@media (min-width:1024px) { .sidebar-panel { position:relative; transform:none; width:272px; box-shadow:none; border-right:1px solid #e9edf2; } .sidebar-overlay { display:none; } }
.sidebar-item { position:relative; display:flex; align-items:center; gap:12px; padding:10px 16px 10px 19px; border-radius:10px; transition:background .15s,color .15s; color:#475569; font-size:.875rem; font-weight:500; line-height:1.3; cursor:pointer; width:100%; border:none; background:transparent; }
.sidebar-item:hover { background:var(--dbn-blue-light); color:var(--dbn-blue-text); }
.sidebar-item.active { background:var(--dbn-orange-light); color:var(--dbn-orange-deep); font-weight:600; }
.sidebar-item.active::before { content:''; position:absolute; left:0; top:8px; bottom:8px; width:3px; border-radius:3px; background:var(--dbn-orange); }
.sidebar-item .icon { font-size:1.25rem; width:28px; text-align:center; flex-shrink:0; }
.sidebar-item-chevron { margin-left:auto; font-size:.7rem; opacity:.5; transition:transform .18s ease; flex-shrink:0; }
.sidebar-item-chevron.open { transform:rotate(90deg); opacity:.9; }
.sidebar-submenu { display:flex; flex-direction:column; gap:3px; padding:5px 0 6px 18px; margin-bottom:4px; border-left:2px solid #eef1f5; margin-left:23px; }
.sidebar-subitem { position:relative; display:flex; align-items:flex-start; gap:10px; padding:7px 12px; border-radius:9px; color:#64748b; font-size:.82rem; font-weight:500; line-height:1.35; cursor:pointer; width:100%; border:none; background:transparent; transition:background .15s,color .15s; text-align:left; }
.sidebar-subitem:hover { background:var(--dbn-blue-light); color:var(--dbn-blue-text); }
.sidebar-subitem.active { background:var(--dbn-orange-light); color:var(--dbn-orange-deep); font-weight:700; }
.sidebar-subitem .icon { font-size:1rem; width:20px; text-align:center; flex-shrink:0; margin-top:1px; }
.sidebar-subitem span:last-child { padding-top:1px; }
.camera-modal { position:fixed; inset:0; background:rgba(0,0,0,.92); z-index:100; display:flex; align-items:center; justify-content:center; flex-direction:column; }
.camera-container { width:90%; max-width:500px; background:#fff; border-radius:24px; overflow:hidden; padding:20px; }
#qr-reader-global,#qr-reader-montagem { width:100%; }
.filter-badge { background:var(--dbn-orange-light); color:var(--dbn-orange); padding:4px 14px; border-radius:20px; font-size:.75rem; display:inline-flex; align-items:center; gap:8px; font-weight:500; }
.sub-selected { background:#fef3c7; border-color:#f59e0b; }
.stat-card { position:relative; background:#fff; border-radius:16px; padding:20px 22px; box-shadow:var(--dbn-shadow-sm); border:1px solid #e9edf2; transition:transform .18s,box-shadow .18s; overflow:hidden; }
.stat-card:hover { transform:translateY(-3px); box-shadow:var(--dbn-shadow-md); }
.stat-card .stat-icon-chip { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.3rem; flex-shrink:0; align-self:flex-start; }
.stat-card .stat-value { font-size:clamp(1.15rem,2.6vw,1.85rem); font-weight:800; color:var(--dbn-blue-text); font-variant-numeric:tabular-nums; letter-spacing:-0.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.stat-card .stat-label { font-size:.78rem; color:#64748b; font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.stat-card .stat-detail { font-size:.75rem; color:#94a3b8; margin-top:2px; }
.btn-primary { background:linear-gradient(155deg,var(--dbn-orange) 0%,var(--dbn-orange-deep) 100%); color:#fff; padding:10px 24px; border-radius:10px; font-weight:600; font-size:.875rem; border:none; cursor:pointer; transition:filter .15s,transform .15s; display:inline-flex; align-items:center; gap:8px; box-shadow:0 4px 14px rgba(244,121,32,.28); }
.btn-primary:hover { filter:brightness(1.06); transform:translateY(-1px); }
.btn-outline { background:transparent; color:var(--dbn-blue-text); border:1.5px solid var(--dbn-blue); padding:10px 24px; border-radius:10px; font-weight:600; font-size:.875rem; cursor:pointer; transition:all .15s; display:inline-flex; align-items:center; gap:8px; }
.btn-outline:hover { background:var(--dbn-blue-light); }
.fabrica-select { background:#fff; border:1px solid #e2e8f0; border-radius:10px; padding:6px 12px; font-size:.875rem; color:#1e293b; outline:none; }
.fabrica-select:focus { border-color:var(--dbn-orange); ring:2px solid var(--dbn-orange-light); }
.table-actions { display:flex; gap:6px; flex-wrap:wrap; }
.required-star { color: #ef4444; margin-left: 2px; }
.badge-pre-moldado { background: #fef3c7; color: #92400e; font-size: 0.6rem; padding: 2px 8px; border-radius: 12px; font-weight: 600; }
.anexos-pdf { background:#f8fafc; border:1px solid #e2e8f0; border-radius:10px; padding:10px 12px; margin-top:8px; display:flex; flex-direction:column; gap:8px; }
.anexos-pdf-head { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.anexos-pdf-label { font-size:.78rem; font-weight:700; color:#475569; }
.anexos-pdf-btn { background:var(--dbn-blue); color:#fff; font-size:.72rem; font-weight:700; padding:5px 10px; border-radius:7px; cursor:pointer; white-space:nowrap; }
.anexos-pdf-btn.disabled { opacity:.6; cursor:not-allowed; }
.anexos-pdf-btn:hover { filter:brightness(1.1); }
.anexos-pdf-erro { font-size:.72rem; color:#ef4444; margin:0; }
.anexos-pdf-lista { display:flex; flex-direction:column; gap:4px; margin:0; padding:0; list-style:none; }
.anexos-pdf-item { display:flex; justify-content:space-between; align-items:center; gap:8px; background:#fff; border:1px solid #e9edf2; border-radius:7px; padding:5px 9px; }
.anexos-pdf-item a { font-size:.76rem; color:var(--dbn-blue-text); text-decoration:none; word-break:break-all; }
.anexos-pdf-item a:hover { text-decoration:underline; }
.anexos-pdf-remover { background:transparent; border:none; color:#cbd5e1; cursor:pointer; font-size:.76rem; flex-shrink:0; }
.anexos-pdf-remover:hover { color:#ef4444; }
.fase-colagem { background: #f0fdf4; border-left: 4px solid #22c55e; }
.fase-montagem-caixa { background: #eff6ff; border-left: 4px solid #3b82f6; }
.fase-teto { background: #fefce8; border-left: 4px solid #eab308; }
.fase-apoios { background: #fef2f2; border-left: 4px solid #ef4444; }
.fase-porta { background: #fdf4ff; border-left: 4px solid #a855f7; }
@media print {
.etiqueta-container {
page-break-after: always;
}
.etiqueta-container:last-child {
page-break-after: avoid;
}
}
.etiqueta-print {
width: 100%;
max-width: 150mm;
margin: 0 auto;
padding: 3mm 4mm;
background: #ffffff;
border: 1px solid #e0e0e0;
display: flex;
flex-direction: row;
align-items: stretch;
gap: 3mm;
min-height: 70mm;
}
.etiqueta-print .qr-left {
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 28mm;
}
.etiqueta-print .qr-left .qr-code {
width: 25mm;
height: 25mm;
border: 1px solid #e0e0e0;
padding: 1mm;
}
.etiqueta-print .qr-left .qr-codigo {
font-size: 6px;
color: #666;
font-family: 'Courier New', monospace;
margin-top: 1mm;
text-align: center;
word-break: break-all;
}
.etiqueta-print .info-right {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.etiqueta-print .info-right .logo {
font-size: 14px;
font-weight: 700;
color: #1a3b5c;
}
.etiqueta-print .info-right .logo span {
color: #f47920;
}
.etiqueta-print .info-right .subtitle {
font-size: 6px;
color: #666;
letter-spacing: 1.5px;
font-weight: 600;
}
.etiqueta-print .info-right .line {
margin-top: 1mm;
width: 30px;
height: 1.5px;
background: #f47920;
}
.etiqueta-print .info-right .peca-label {
font-size: 7px;
color: #999;
font-weight: 600;
letter-spacing: 1px;
margin-top: 2mm;
}
.etiqueta-print .info-right .peca-value {
font-size: 16px;
font-weight: 700;
color: #1a3b5c;
line-height: 1.1;
}
.etiqueta-print .info-right .detalhes {
display: flex;
gap: 3px;
flex-wrap: wrap;
margin-top: 2mm;
}
.etiqueta-print .info-right .detalhes span {
font-size: 7px;
color: #333;
background: #f5f5f5;
padding: 1px 5px;
border-radius: 2px;
border: 1px solid #e8e8e8;
}
.etiqueta-print .info-right .detalhes .fck {
background: #fef3e8;
border-color: #f47920;
color: #f47920;
font-weight: 700;
}
.etiqueta-print .info-right .revisao {
margin-top: 2mm;
font-size: 8px;
color: #999;
}
.etiqueta-print .info-right .revisao span {
font-weight: 700;
color: #333;
}
.etiquetas-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2mm;
padding: 2mm;
width: 100%;
max-width: 310mm;
margin: 0 auto;
}
.etiquetas-grid .etiqueta-wrapper {
page-break-inside: avoid;
}
.peca-row {
display: flex;
align-items: baseline;
gap: 6px;
flex-wrap: wrap;
margin-top: 1mm;
}
.peca-row .peca-value {
font-size: 13px;
font-weight: 700;
color: #1a3b5c;
line-height: 1.1;
word-break: break-word;
}
.peca-row .peca-numero {
font-size: 13px;
font-weight: 700;
color: #1a3b5c;
line-height: 1.1;
letter-spacing: 0px;
background: transparent;
padding: 0;
border: none;
border-radius: 0;
}
.filtro-container {
background: #fff;
border-radius: 12px;
border: 1px solid #e9edf2;
padding: 16px;
margin-bottom: 16px;
transition: all 0.2s;
}
.filtro-container:hover {
border-color: #cbd5e1;
}
.filtro-toggle {
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
user-select: none;
}
.filtro-toggle:hover .filtro-title {
color: #1a3b5c;
}
.filtro-title {
font-weight: 600;
color: #475569;
transition: color 0.2s;
display: flex;
align-items: center;
gap: 8px;
}
.filtro-badge {
background: #e8edf3;
color: #1a3b5c;
font-size: 0.7rem;
padding: 2px 10px;
border-radius: 12px;
font-weight: 600;
}
.filtro-body {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid #f1f5f9;
}
.filtro-actions {
display: flex;
gap: 8px;
margin-top: 12px;
flex-wrap: wrap;
}
.filtro-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 8px;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid #f1f5f9;
}
.filtro-stat-item {
background: #f8fafc;
padding: 8px 12px;
border-radius: 8px;
text-align: center;
}
.filtro-stat-item .stat-number {
font-weight: 700;
font-size: 1.1rem;
color: #1a3b5c;
}
.filtro-stat-item .stat-label {
font-size: 0.7rem;
color: #94a3b8;
display: block;
}
.filter-btn {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 6px 14px;
font-size: 0.875rem;
font-weight: 500;
color: #475569;
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
gap: 6px;
}
.filter-btn:hover {
background: #f1f5f9;
border-color: #94a3b8;
}
.filter-btn.active {
background: #eff6ff;
border-color: #3b82f6;
color: #1d4ed8;
}
/* ==================== PCP: PROGRAMAÇÃO DE FÁBRICA ==================== */
.pcp-tabs { display:flex; gap:6px; flex-wrap:wrap; background:#fff; border:1px solid #e9edf2; border-radius:12px; padding:6px; }
.pcp-tab { border:none; background:transparent; padding:9px 16px; border-radius:9px; font-size:.85rem; font-weight:600; color:#64748b; cursor:pointer; transition:all .15s; }
.pcp-tab:hover { background:var(--dbn-blue-light); color:var(--dbn-blue-text); }
.pcp-tab.active { background:var(--dbn-blue); color:#fff; }
/* Variante cinza-claro (Almox > Movimentação) — mesma base do
.pcp-tab, só troca o azul do "active" por cinza claro. */
.pcp-tab.active-cinza { background:#e5e7eb; color:#1a3b5c; }
.pcp-modulo-placeholder { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; background:#fff; border:1px solid #e9edf2; border-radius:16px; padding:60px 20px; text-align:center; }
.pcp-modulo-placeholder-icon { font-size:2.5rem; }
.pcp-modulo-placeholder h3 { font-size:1.15rem; font-weight:700; color:var(--dbn-blue-text); }
.pcp-modulo-placeholder p { font-size:.85rem; color:#94a3b8; }
.pcp-op-layout { display:grid; grid-template-columns:260px 1fr; gap:16px; align-items:start; }
@media (max-width:900px) { .pcp-op-layout { grid-template-columns:1fr; } }
.pcp-op-lista { background:#fff; border:1px solid #e9edf2; border-radius:14px; padding:12px; display:flex; flex-direction:column; gap:10px; }
.pcp-op-busca { width:100%; }
.pcp-op-lista-itens { display:flex; flex-direction:column; gap:4px; max-height:65vh; overflow-y:auto; }
.pcp-op-obra-item { display:flex; flex-direction:column; align-items:flex-start; gap:1px; border:none; background:transparent; padding:9px 10px; border-radius:9px; cursor:pointer; text-align:left; transition:all .15s; }
.pcp-op-obra-item:hover { background:var(--dbn-blue-light); }
.pcp-op-obra-item.active { background:var(--dbn-orange-light); }
.pcp-op-obra-nome { font-size:.83rem; font-weight:700; color:#1e293b; }
.pcp-op-obra-item.active .pcp-op-obra-nome { color:var(--dbn-orange-deep); }
.pcp-op-obra-cliente { font-size:.72rem; color:#94a3b8; }
.pcp-op-form { background:#fff; border:1px solid #e9edf2; border-radius:14px; padding:20px; }
.pcp-op-header { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.pcp-op-header h2 { font-size:1.2rem; font-weight:800; color:var(--dbn-blue-text); }
.pcp-op-numero { font-size:.8rem; color:#f47920; font-weight:700; margin-top:2px; }
.pcp-op-campos { display:flex; flex-direction:column; gap:12px; margin-bottom:18px; padding-bottom:18px; border-bottom:1px solid #f1f5f9; }
.pcp-op-campo { display:flex; flex-direction:column; gap:3px; }
.pcp-op-campo-label { font-size:.7rem; font-weight:700; color:#94a3b8; text-transform:uppercase; letter-spacing:.04em; }
.pcp-op-campo-valor { font-size:.92rem; font-weight:700; color:#1e293b; }
.pcp-op-descricao { width:100%; min-height:70px; border:1.5px solid #e2e8f0; border-radius:10px; padding:9px 12px; font-size:.85rem; font-family:inherit; resize:vertical; outline:none; }
.pcp-op-descricao:focus { border-color:var(--dbn-orange); }
table.pcp-op-tabela { width:100%; border-collapse:collapse; }
table.pcp-op-tabela th { background:var(--dbn-orange); color:#fff; font-size:.68rem; text-transform:uppercase; letter-spacing:.04em; padding:9px 10px; text-align:left; }
table.pcp-op-tabela th:first-child { border-radius:8px 0 0 8px; }
table.pcp-op-tabela th:last-child { border-radius:0 8px 8px 0; }
table.pcp-op-tabela td { font-size:.83rem; padding:9px 10px; border-bottom:1px solid #f1f5f9; color:#1e293b; }
.pcp-op-vazio { text-align:center; color:#cbd5e1; padding:24px !important; }
.pcp-stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; }
.pcp-stat-card { display:flex; align-items:center; gap:12px; background:#fff; border:1px solid #e9edf2; border-radius:14px; padding:16px; box-shadow:var(--dbn-shadow-sm); }
.pcp-stat-card.pcp-stat-alerta { border-color:#fecaca; background:#fef2f2; }
.pcp-stat-icon { font-size:1.6rem; }
.pcp-stat-valor { font-size:1.5rem; font-weight:800; color:var(--dbn-blue-text); line-height:1.1; }
.pcp-stat-label { font-size:.75rem; color:#64748b; font-weight:600; margin-top:2px; }
.pcp-plan-tabela-wrap { background:#fff; border:1px solid #e9edf2; border-radius:14px; padding:14px; overflow-x:auto; }
/* border-collapse:separate (em vez de collapse) — igual à tabela de
presença (.pf-tabela-presenca) — porque position:sticky em th/td
não funciona de forma confiável com border-collapse:collapse em
vários navegadores; aqui viabiliza travar Setor/Produto ao rolar
a tabela pro lado (ela tem 1 coluna por semana, pode ficar larga). */
table.pcp-plan-tabela { width:100%; border-collapse:separate; border-spacing:0; font-size:.82rem; border:1px solid #e2e8f0; }
table.pcp-plan-tabela-fixa { table-layout:fixed; }
/* !important necessário — table.pcp-plan-tabela th (a regra geral,
logo abaixo) também define white-space:nowrap com a MESMA
especificidade (1 classe + 2 seletores de tipo nos dois casos), e
por vir depois no arquivo, vencia essa regra por ordem de
declaração. Sem o !important, os cabeçalhos "Total Planejado" /
"Programado (semana atual)" etc. ficavam em nowrap mesmo aqui —
inofensivo numa coluna larga, mas no PDF (coluna mais estreita)
o texto de cabeçalhos vizinhos saía colado, tipo
"TOTAL PLANEJADOPROGRAMADO (SEMANA...", sem quebrar linha. */
table.pcp-plan-tabela-fixa th { white-space:normal !important; line-height:1.15; }
table.pcp-plan-tabela th, table.pcp-plan-tabela td { border:1px solid #e2e8f0; }
table.pcp-plan-tabela th { text-align:center; font-size:.68rem; text-transform:uppercase; letter-spacing:.03em; color:#64748b; background:#f8fafc; padding:8px 10px; white-space:nowrap; }
table.pcp-plan-tabela th:nth-child(1) { text-align:left; }
table.pcp-plan-tabela td { text-align:center; padding:7px 10px; color:#1e293b; white-space:nowrap; }
table.pcp-plan-tabela td:nth-child(1) { text-align:left; }
table.pcp-plan-tabela tbody tr:nth-child(even) { background:#fafbfc; }
table.pcp-plan-tabela .pcp-plan-vazio { color:#cbd5e1; }
table.pcp-plan-tabela .pcp-plan-input-dia { width:52px; text-align:center; border:1px solid #e2e8f0; border-radius:6px; padding:3px 2px; font-size:.78rem; color:#1e293b; }
table.pcp-plan-tabela .pcp-plan-input-dia:focus { outline:none; border-color:var(--dbn-orange); }
table.pcp-plan-tabela .pcp-plan-col-label { text-align:left !important; }
table.pcp-plan-tabela .pcp-plan-th-ordenavel:hover { background:#f1f5f9; }
table.pcp-plan-tabela .pcp-plan-th-ordenavel { user-select:none; }
/* Só a tabela de Necessidade da Serralheria — nome do item longo
(ex.: "CAPI PAINEL H=3,00X3,00M JANELA ALTA - (200X60/160) C/
CERÂMICA") sem isso forçava a coluna a abrir até caber tudo numa
linha só (herdava o white-space:nowrap geral), espremendo as
colunas de dia/semana pra quase nada na impressão/PDF. */
table.pcp-plan-tabela .pcp-ser-col-nome { white-space:normal !important; max-width:220px; line-height:1.2; }
/* Trava Setor e Produto visíveis ao rolar a tabela pro lado (mesmo
padrão de .pf-col-fixa da tabela de presença). Largura fixa na 1ª
coluna pra o "left" da 2ª ser previsível — Setor/Cela-Peça nunca
passa disso (nomes curtos: CAD, GRC, Serralheria, Pré-Moldado). */
/* width/max-width e, pra col-fixa-2/col-obra, o "left" vêm por style
inline agora (largura da 1ª coluna é arrastável) — aqui só fica o
resto (sticky, z-index, fundo, sombra), que não muda. */
table.pcp-plan-tabela .pcp-plan-col-fixa-1 { position:sticky; left:0; z-index:2; overflow:hidden; text-overflow:ellipsis; background:#fff; box-shadow:2px 0 4px rgba(15,39,64,.06); }
/* Largura alargada (260px) e quebra de linha (white-space:normal) em
vez do corte com "..." de antes — nome de produto comprido (ex.:
"CAPI PAINEL H=3,00X3,00M JANELA ALTA - (200X60/160) C/ CERÂMICA")
precisa aparecer inteiro, não cortado. Larguras aqui têm que bater
com LARGURA_COL_PRODUTO_PLAN/LARGURA_COL_OBRA_PLAN no JS, que
calcula o "left" sticky da coluna seguinte a partir delas. */
table.pcp-plan-tabela .pcp-plan-col-fixa-2 { position:sticky; z-index:2; width:260px; max-width:260px; white-space:normal; line-height:1.2; background:#fff; box-shadow:2px 0 4px rgba(15,39,64,.06); }
table.pcp-plan-tabela .pcp-plan-col-obra { position:sticky; z-index:2; width:170px; max-width:170px; white-space:normal; line-height:1.2; background:#fff; box-shadow:2px 0 4px rgba(15,39,64,.06); }
table.pcp-plan-tabela .pcp-plan-col-resize-handle { position:absolute; top:0; right:-3px; width:6px; height:100%; cursor:col-resize; z-index:4; }
table.pcp-plan-tabela .pcp-plan-col-resize-handle:hover { background:var(--dbn-orange); opacity:.5; }
table.pcp-plan-tabela th.pcp-plan-col-fixa-1, table.pcp-plan-tabela th.pcp-plan-col-fixa-2, table.pcp-plan-tabela th.pcp-plan-col-obra { z-index:3; background:#f8fafc; }
table.pcp-plan-tabela tbody tr:nth-child(even) .pcp-plan-col-fixa-1,
table.pcp-plan-tabela tbody tr:nth-child(even) .pcp-plan-col-fixa-2,
table.pcp-plan-tabela tbody tr:nth-child(even) .pcp-plan-col-obra { background:#fafbfc; }
table.pcp-plan-tabela .pcp-plan-linha-total .pcp-plan-col-fixa-1 { background:var(--dbn-blue-light); }
html.dark table.pcp-plan-tabela .pcp-plan-col-fixa-1,
html.dark table.pcp-plan-tabela .pcp-plan-col-fixa-2,
html.dark table.pcp-plan-tabela .pcp-plan-col-obra { background:#1e293b; }
html.dark table.pcp-plan-tabela th.pcp-plan-col-fixa-1,
html.dark table.pcp-plan-tabela th.pcp-plan-col-fixa-2,
html.dark table.pcp-plan-tabela th.pcp-plan-col-obra { background:#273449; }
/* Congela a coluna "Funcionário" do Controle Diário de Presença ao
rolar a tabela pro lado (tem 1 coluna por dia do mês) — sem isso,
some o nome de quem está vendo presença/falta longe do início.
border-collapse:collapse (padrão de .pcp-plan-tabela) quebra
position:sticky em cima de | / | em vários navegadores — essa
tabela específica usa border-collapse:separate só pra isso funcionar. */
table.pf-tabela-presenca { border-collapse:separate; border-spacing:0; }
table.pf-tabela-presenca .pf-col-fixa { position:sticky; left:0; z-index:2; background:#fff; box-shadow:2px 0 4px rgba(15,39,64,.06); }
table.pf-tabela-presenca th.pf-col-fixa { background:#f8fafc; z-index:3; }
table.pf-tabela-presenca tbody tr:nth-child(even) .pf-col-fixa { background:#fafbfc; }
html.dark table.pf-tabela-presenca .pf-col-fixa { background:#1e293b; }
html.dark table.pf-tabela-presenca th.pf-col-fixa { background:#273449; }
table.pcp-plan-tabela .pcp-plan-total { font-weight:800; color:var(--dbn-orange-deep); background:#fff7ed; }
table.pcp-plan-tabela .pcp-plan-linha-total { background:var(--dbn-blue-light); font-weight:800; color:var(--dbn-blue-text); }
table.pcp-plan-tabela .pcp-plan-linha-total td { border-top:2px solid var(--dbn-blue); }
table.pcp-plan-tabela .pcp-plan-mes-header { background:var(--dbn-orange-light); color:var(--dbn-orange-deep); font-size:.72rem; font-weight:800; text-align:center; }
table.pcp-plan-tabela .pcp-plan-semana-header { font-size:.64rem; color:#94a3b8; text-align:center; }
.pcp-plan-semana-numero { display:block; font-weight:800; color:#64748b; font-size:.66rem; text-align:center; }
.pcp-plan-semana-datas { display:block; font-size:.62rem; color:#0f172a; font-weight:800; margin-top:1px; text-transform:none; letter-spacing:0; text-align:center; }
table.pcp-plan-tabela .pcp-plan-linha-cela td { background:var(--dbn-blue); color:#fff; font-weight:800; font-size:.78rem; padding:8px 10px; text-align:left; }
.pcp-plan-setor-badge { background:var(--dbn-blue-light); color:var(--dbn-blue-text); font-size:.68rem; font-weight:700; padding:2px 9px; border-radius:99px; }
.pcp-plan-filtro-bar { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; background:#fff; border:1px solid #e9edf2; border-radius:12px; padding:10px 14px; }
.pcp-plan-filtro-info { font-size:.8rem; font-weight:600; color:var(--dbn-orange-deep); }
.pcp-plan-filtro-check { display:flex; align-items:center; gap:7px; font-size:.82rem; color:#475569; font-weight:600; cursor:pointer; }
.pcp-plan-tabela-titulo { font-size:1rem; font-weight:800; color:var(--dbn-blue-text); margin-bottom:2px; }
.pcp-plan-tabela-sub { font-size:.72rem; color:#94a3b8; margin-bottom:10px; }
.pcp-plan-linha-clicavel { cursor:pointer; }
.pcp-plan-linha-clicavel:hover { background:#f8fafc; }
.pcp-plan-linha-detalhe td { background:#f8fafc; padding:10px !important; }
.pcp-plan-pecas-lista { display:flex; flex-direction:column; gap:4px; }
/* Largura fixa por campo (não "fr" elástico) — a linha de detalhe
ocupa a tabela inteira (colSpan em cima de várias semanas), e
colunas em fr esticavam pra preencher todo esse espaço largo,
deixando código/obra/data/status bem afastados um do outro.
Grid com colunas de largura fixa mantém cada campo alinhado
verticalmente, um embaixo do outro, igual numa tabela. */
.pcp-plan-peca-item { display:grid; grid-template-columns:280px 110px 90px 120px; align-items:center; gap:6px 18px; background:#fff; border:1px solid #e9edf2; border-radius:7px; padding:6px 10px; font-size:.76rem; }
.pcp-plan-peca-codigo { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; color:#1e293b; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pcp-plan-peca-obra { color:#64748b; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pcp-plan-peca-data { color:#64748b; }
.pcp-plan-peca-status { color:#c2410c; font-weight:700; text-transform:uppercase; font-size:.68rem; }
.pcp-plan-peca-status.feito { color:#15803d; }
.pcp-mrp-detalhe-lista { display:flex; flex-direction:column; gap:4px; }
.pcp-mrp-detalhe-item { display:grid; grid-template-columns:1.6fr 1.4fr 1fr 1fr; gap:10px; align-items:center; background:#fff; border:1px solid #e9edf2; border-radius:7px; padding:6px 10px; font-size:.76rem; }
.pcp-mrp-detalhe-produto { color:#1e293b; font-weight:600; }
.pcp-mrp-detalhe-peca { color:#64748b; }
.pcp-mrp-detalhe-qtd { color:#c2410c; font-weight:700; text-align:right; }
.pcp-mrp-detalhe-qtd.pcp-mrp-detalhe-produzido { color:#15803d; }
.pcp-mrp-obras-lista { display:flex; flex-direction:column; gap:10px; }
.pcp-mrp-obra-card { border:1px solid #e9edf2; border-radius:12px; overflow:hidden; }
.pcp-mrp-obra-head { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px 14px; background:#f8fafc; cursor:pointer; flex-wrap:wrap; }
.pcp-mrp-obra-head:hover { background:#f1f5f9; }
.pcp-mrp-obra-nome { font-weight:700; color:#1e293b; font-size:.88rem; }
.pcp-mrp-obra-cliente { font-size:.74rem; color:#94a3b8; margin-left:10px; }
.pcp-mrp-obra-count { font-size:.72rem; font-weight:700; color:var(--dbn-orange-deep); background:var(--dbn-orange-light); padding:3px 10px; border-radius:99px; white-space:nowrap; }
table.pcp-mrp-obra-tabela { border-top:1px solid #e2e8f0; }
.pcp-op-gantt-row { display:grid; grid-template-columns:1.3fr 1fr; gap:16px; align-items:start; }
@media (max-width:1100px) { .pcp-op-gantt-row { grid-template-columns:1fr; } }
.pcp-op-tabela-wrap { background:#fff; border:1px solid #e9edf2; border-radius:14px; padding:16px; overflow-x:auto; }
table.pcp-op-lista-tabela th:nth-child(n+4), table.pcp-op-lista-tabela td:nth-child(n+4) { text-align:center; }
table.pcp-op-lista-tabela th:nth-child(1), table.pcp-op-lista-tabela th:nth-child(2), table.pcp-op-lista-tabela th:nth-child(3) { text-align:left; }
.pcp-op-progresso { display:flex; align-items:center; gap:8px; min-width:90px; }
.pcp-op-progresso-bar { flex:1; }
.pcp-sit-badge { display:inline-block; font-size:.68rem; font-weight:700; padding:3px 10px; border-radius:99px; white-space:nowrap; }
.pcp-sit-badge.pcp-sit-no_prazo { background:#dcfce7; color:#15803d; }
.pcp-sit-badge.pcp-sit-atencao { background:#ffedd5; color:#c2410c; }
.pcp-sit-badge.pcp-sit-nao_iniciada { background:var(--dbn-blue-light); color:var(--dbn-blue-text); }
.pcp-sit-badge.pcp-sit-atrasada { background:#fee2e2; color:#b91c1c; }
.pcp-sit-badge.pcp-sit-concluida { background:#dcfce7; color:#15803d; }
.pcp-op-ver-todas { margin-top:10px; width:100%; text-align:center; background:transparent; border:1px dashed #cbd5e1; color:#64748b; font-size:.78rem; font-weight:600; padding:8px; border-radius:9px; cursor:pointer; transition:all .15s; }
.pcp-op-ver-todas:hover { border-color:var(--dbn-blue); color:var(--dbn-blue-text); }
.pcp-gantt-wrap { background:#fff; border:1px solid #e9edf2; border-radius:14px; padding:16px; }
.pcp-gantt-titulo { font-size:.95rem; font-weight:700; color:var(--dbn-blue-text); margin-bottom:10px; }
.pcp-gantt-header { display:flex; padding-left:140px; margin-bottom:8px; }
.pcp-gantt-header span { flex:1; font-size:.68rem; font-weight:700; color:#94a3b8; text-transform:uppercase; text-align:center; }
.pcp-gantt-linha { display:flex; align-items:center; gap:10px; padding:6px 0; border-top:1px solid #f1f5f9; }
.pcp-gantt-nome { width:130px; flex-shrink:0; font-size:.78rem; font-weight:600; color:#1e293b; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pcp-gantt-trilha { position:relative; flex:1; height:22px; background:#f8fafc; border-radius:6px; }
.pcp-gantt-barra { position:absolute; top:0; bottom:0; border-radius:6px; background:var(--pcp-cor-solido,#3b82f6); color:#fff; font-size:.66rem; font-weight:700; display:flex; align-items:center; justify-content:center; min-width:24px; }
.pcp-gantt-barra.pcp-cor-azul { --pcp-cor-solido:#3b82f6; }
.pcp-gantt-barra.pcp-cor-verde { --pcp-cor-solido:#22c55e; }
.pcp-gantt-barra.pcp-cor-roxo { --pcp-cor-solido:#a855f7; }
.pcp-gantt-barra.pcp-cor-laranja { --pcp-cor-solido:#f97316; }
.pcp-gantt-barra.pcp-cor-rosa { --pcp-cor-solido:#ec4899; }
.pcp-gantt-barra.pcp-cor-ciano { --pcp-cor-solido:#06b6d4; }
.pcp-gantt-barra.pcp-cor-amarelo { --pcp-cor-solido:#eab308; }
.pcp-gantt-barra.pcp-cor-vermelho { --pcp-cor-solido:#ef4444; }
.pcp-plan-filtros { display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:#fff; border:1px solid #e9edf2; border-radius:12px; padding:10px 14px; }
.pcp-plan-filtros .input-field { max-width:240px; }
.pcp-plan-filtro-limpar { border:1px solid var(--dbn-orange); background:var(--dbn-orange-light); color:var(--dbn-orange-deep); padding:7px 12px; border-radius:9px; font-size:.78rem; font-weight:700; cursor:pointer; transition:filter .15s; }
.pcp-plan-filtro-limpar:hover { filter:brightness(0.96); }
.pcp-week-nav { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; background:#fff; border:1px solid #e9edf2; border-radius:12px; padding:10px 14px; }
.pcp-nav-btn { border:1px solid #e2e8f0; background:#fff; padding:8px 14px; border-radius:9px; font-size:.82rem; font-weight:600; color:#475569; cursor:pointer; transition:all .15s; }
.pcp-nav-btn:hover { background:var(--dbn-blue-light); border-color:var(--dbn-blue); color:var(--dbn-blue-text); }
.pcp-week-label { display:flex; align-items:center; gap:10px; font-weight:700; color:var(--dbn-blue-text); font-size:.92rem; }
.pcp-today-btn { border:none; background:var(--dbn-orange-light); color:var(--dbn-orange-deep); padding:4px 10px; border-radius:20px; font-size:.72rem; font-weight:700; cursor:pointer; }
.pcp-today-btn:hover { filter:brightness(0.96); }
.pcp-export-btn { border:none; background:linear-gradient(155deg,var(--dbn-orange) 0%,var(--dbn-orange-deep) 100%); color:#fff; padding:9px 16px; border-radius:9px; font-size:.82rem; font-weight:700; cursor:pointer; box-shadow:0 4px 12px rgba(244,121,32,.25); transition:filter .15s,transform .15s; }
.pcp-export-btn:hover { filter:brightness(1.05); transform:translateY(-1px); }
.pcp-export-wrap { display:flex; align-items:center; gap:6px; }
.pcp-publicar-btn { border:none; background:linear-gradient(155deg,var(--dbn-orange) 0%,var(--dbn-orange-deep) 100%); color:#fff; padding:9px 16px; border-radius:9px; font-size:.82rem; font-weight:700; cursor:pointer; box-shadow:0 4px 12px rgba(244,121,32,.25); transition:filter .15s,transform .15s; }
.pcp-publicar-btn:hover { filter:brightness(1.05); transform:translateY(-1px); }
.pcp-publicar-btn:disabled { opacity:.6; cursor:not-allowed; transform:none; }
.pcp-semana-publicada-badge { background:var(--dbn-orange-light); color:var(--dbn-orange-deep); border:1px solid #fcd9b8; padding:8px 14px; border-radius:9px; font-size:.8rem; font-weight:700; cursor:default; }
.pcp-export-tamanho { border:1px solid #e2e8f0; background:#fff; padding:8px 10px; border-radius:9px; font-size:.78rem; font-weight:600; color:#475569; cursor:pointer; outline:none; }
.pcp-export-tamanho:focus { border-color:var(--dbn-orange); }
.pcp-pending-hint { background:var(--dbn-orange-light); color:var(--dbn-orange-deep); border-radius:10px; padding:8px 14px; font-size:.82rem; font-weight:600; }
.pcp-calendar { display:grid; grid-template-columns:repeat(5,minmax(200px,1fr)); gap:12px; overflow-x:auto; }
.pcp-day-col { display:flex; flex-direction:column; background:#fff; border:1px solid #e9edf2; border-radius:12px; overflow:hidden; min-height:220px; }
.pcp-day-col.is-today { border-color:var(--dbn-orange); box-shadow:0 0 0 1px var(--dbn-orange); }
.pcp-day-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; padding:10px 12px; background:var(--dbn-blue-light); }
.pcp-day-volume { flex-basis:100%; font-size:.72rem; font-weight:500; letter-spacing:.02em; color:#64748b; margin-top:2px; }
.pcp-day-col.is-today .pcp-day-volume { color:var(--dbn-orange-deep); }
.pcp-day-col.is-today .pcp-day-head { background:var(--dbn-orange-light); }
.pcp-day-name { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--dbn-blue-text); }
.pcp-day-col.is-today .pcp-day-name { color:var(--dbn-orange-deep); }
.pcp-day-date { font-size:.78rem; font-weight:600; color:#64748b; }
.pcp-day-body { flex:1; padding:10px; display:flex; flex-direction:column; gap:8px; min-height:100px; }
.pcp-day-empty { font-size:.78rem; color:#cbd5e1; text-align:center; margin-top:12px; }
.pcp-forma-group { display:flex; flex-direction:column; gap:8px; }
.pcp-forma-group + .pcp-forma-group { margin-top:4px; padding-top:10px; border-top:1px dashed #e2e8f0; }
.pcp-forma-title { display:flex; justify-content:space-between; align-items:center; font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--dbn-blue-text); }
.pcp-forma-count { background:var(--dbn-blue-light); color:var(--dbn-blue-text); font-size:.64rem; font-weight:700; padding:1px 7px; border-radius:99px; }
.pcp-produto-group { display:flex; flex-direction:column; gap:7px; background:var(--pcp-cor-bg); border:1px solid var(--pcp-cor-border); border-left:3px solid var(--pcp-cor-solid); border-radius:9px; padding:8px; }
.pcp-produto-group + .pcp-produto-group { margin-top:2px; }
.pcp-produto-title { display:flex; justify-content:space-between; align-items:center; gap:6px; }
.pcp-produto-nome { display:flex; align-items:center; gap:5px; font-size:.7rem; font-weight:700; color:var(--pcp-cor-texto); line-height:1.25; }
.pcp-produto-icone { font-size:.85rem; line-height:1; flex-shrink:0; }
.pcp-produto-count { background:#fff; color:var(--pcp-cor-texto); font-size:.64rem; font-weight:700; padding:1px 7px; border-radius:99px; flex-shrink:0; border:1px solid var(--pcp-cor-border); }
.pcp-produto-group .pcp-card { background:#fff; }
.pcp-cor-azul { --pcp-cor-bg:#eff6ff; --pcp-cor-border:#bfdbfe; --pcp-cor-solid:#3b82f6; --pcp-cor-texto:#1d4ed8; }
.pcp-cor-verde { --pcp-cor-bg:#f0fdf4; --pcp-cor-border:#bbf7d0; --pcp-cor-solid:#22c55e; --pcp-cor-texto:#15803d; }
.pcp-cor-roxo { --pcp-cor-bg:#faf5ff; --pcp-cor-border:#e9d5ff; --pcp-cor-solid:#a855f7; --pcp-cor-texto:#7e22ce; }
.pcp-cor-laranja { --pcp-cor-bg:#fff7ed; --pcp-cor-border:#fed7aa; --pcp-cor-solid:#f97316; --pcp-cor-texto:#c2410c; }
.pcp-cor-rosa { --pcp-cor-bg:#fdf2f8; --pcp-cor-border:#fbcfe8; --pcp-cor-solid:#ec4899; --pcp-cor-texto:#be185d; }
.pcp-cor-ciano { --pcp-cor-bg:#ecfeff; --pcp-cor-border:#a5f3fc; --pcp-cor-solid:#06b6d4; --pcp-cor-texto:#0e7490; }
.pcp-cor-amarelo { --pcp-cor-bg:#fefce8; --pcp-cor-border:#fef08a; --pcp-cor-solid:#eab308; --pcp-cor-texto:#a16207; }
.pcp-cor-vermelho { --pcp-cor-bg:#fef2f2; --pcp-cor-border:#fecaca; --pcp-cor-solid:#ef4444; --pcp-cor-texto:#b91c1c; }
.pcp-card { position:relative; background:#f8fafc; border:1px solid #e9edf2; border-radius:9px; padding:8px 26px 8px 10px; }
.pcp-card-name { font-size:.8rem; font-weight:600; color:#1e293b; line-height:1.25; }
.pcp-card-meta { display:flex; flex-direction:column; gap:1px; margin-top:3px; }
.pcp-card-codigo { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.68rem; color:#94a3b8; }
.pcp-card-obra { font-size:.68rem; color:#94a3b8; }
.pcp-card-remove { position:absolute; top:6px; right:6px; border:none; background:transparent; color:#cbd5e1; font-size:.72rem; cursor:pointer; padding:2px 4px; border-radius:4px; }
.pcp-card-remove:hover { color:#ef4444; background:#fee2e2; }
.pcp-card-forma-select { width:100%; margin-top:6px; border:1px solid #e2e8f0; border-radius:6px; padding:3px 6px; font-size:.68rem; color:#475569; background:#fff; outline:none; }
.pcp-card-forma-select:focus { border-color:var(--dbn-orange); }
.pcp-add-btn { border:none; border-top:1px dashed #e2e8f0; background:#fff; color:var(--dbn-blue-text); font-size:.78rem; font-weight:600; padding:9px; cursor:pointer; transition:background .15s; }
.pcp-add-btn:hover { background:var(--dbn-blue-light); }
.pcp-add-btn:disabled { opacity:.5; cursor:not-allowed; }
.pcp-modal-overlay { position:fixed; inset:0; background:rgba(15,39,64,.45); backdrop-filter:blur(2px); z-index:200; display:flex; align-items:center; justify-content:center; padding:16px; }
.pcp-modal { background:#fff; border-radius:16px; width:100%; max-width:440px; max-height:80vh; display:flex; flex-direction:column; gap:12px; padding:18px; box-shadow:var(--dbn-shadow-lg); }
.pcp-modal-head { display:flex; justify-content:space-between; align-items:center; }
.pcp-modal-head h3 { font-size:1rem; color:var(--dbn-blue-text); }
.pcp-modal-close { border:none; background:#f1f5f9; width:28px; height:28px; border-radius:8px; cursor:pointer; color:#64748b; }
.pcp-modal-close:hover { background:#e2e8f0; }
.pcp-modal-list { overflow-y:auto; display:flex; flex-direction:column; gap:6px; }
.pcp-modal-item { text-align:left; border:1px solid #e9edf2; background:#f8fafc; border-radius:9px; padding:9px 11px; cursor:pointer; transition:all .15s; }
.pcp-modal-item:hover { background:var(--dbn-blue-light); border-color:var(--dbn-blue); }
.pcp-modal-item:disabled { opacity:.5; cursor:not-allowed; }
.pcp-auto-produto-list { max-height:260px; }
.pcp-auto-produto-item { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; }
.pcp-auto-produto-item .pcp-card-meta { margin-top:2px; }
.pcp-auto-produto-check { flex-shrink:0; color:#cbd5e1; font-size:.8rem; }
.pcp-auto-produto-item.selected { background:#fff4ec; border-color:var(--dbn-orange); }
.pcp-auto-produto-item.selected .pcp-auto-produto-check { color:var(--dbn-orange); font-weight:700; }
.cp-modal-md { max-width:480px; overflow-y:auto; }
.cp-modal-lg { max-width:600px; overflow-y:auto; }
.cp-acoes-menu { position:absolute; top:28px; right:0; background:#fff; border:1px solid #e9edf2; border-radius:10px; box-shadow:var(--dbn-shadow-lg); display:flex; flex-direction:column; min-width:150px; z-index:20; overflow:hidden; }
.cp-acoes-menu button { text-align:left; padding:9px 12px; font-size:.82rem; border:none; background:#fff; cursor:pointer; color:#334155; }
.cp-acoes-menu button:hover { background:#f8fafc; }
@media (max-width:900px) {
.pcp-calendar { grid-template-columns:repeat(5,minmax(220px,1fr)); }
}
.filter-btn .badge {
background: #3b82f6;
color: white;
font-size: 0.7rem;
padding: 1px 8px;
border-radius: 12px;
font-weight: 600;
}
/* ==================== KANBAN: CARDS ==================== */
.kb-card { position:relative; background:#fff; border:1px solid #eef1f4; border-left:3px solid #cbd5e1; border-radius:10px; padding:10px 11px; margin-bottom:9px; box-shadow:0 1px 2px rgba(15,39,64,.04); transition:box-shadow .15s ease, transform .15s ease; }
.kb-card:hover { box-shadow:var(--dbn-shadow-sm); transform:translateY(-1px); }
.kb-card-head { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.kb-card-title { font-size:.83rem; font-weight:700; color:var(--dbn-blue-text); line-height:1.3; }
.kb-card-sub { font-size:.71rem; color:#94a3b8; margin-top:1px; }
.kb-card-code { display:inline-block; margin-top:6px; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.66rem; color:#64748b; background:#f1f5f9; padding:1px 7px; border-radius:5px; letter-spacing:.02em; }
.kb-card-icons { display:flex; gap:2px; flex-shrink:0; }
.kb-icon-btn { border:none; background:transparent; width:25px; height:25px; border-radius:7px; display:inline-flex; align-items:center; justify-content:center; font-size:.82rem; color:#64748b; cursor:pointer; transition:background .15s,color .15s; line-height:1; }
.kb-icon-btn:hover { background:var(--dbn-blue-light); color:var(--dbn-blue-text); }
.kb-progress-wrap { margin-top:10px; }
.kb-progress-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:5px; }
.kb-progress-label { font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:#94a3b8; }
.kb-progress-count { font-size:.66rem; font-weight:700; color:#64748b; }
.kb-progress-count.done { color:#16a34a; }
.kb-progress-bar { height:5px; border-radius:99px; background:#eef1f4; overflow:hidden; }
.kb-progress-fill { height:100%; background:linear-gradient(90deg,var(--dbn-orange),var(--dbn-orange-deep)); border-radius:99px; transition:width .25s ease; }
.kb-item { border:1px solid #eef1f4; background:#f8fafc; border-radius:8px; padding:7px 9px; margin-top:6px; transition:background .15s,border-color .15s; }
.kb-item.done { background:#f0fdf4; border-color:#bbf7d0; }
.kb-item-row { display:flex; align-items:center; justify-content:space-between; gap:6px; }
.kb-item-name { font-size:.74rem; font-weight:600; color:#334155; }
.kb-item.done .kb-item-name { color:#16a34a; text-decoration:line-through; text-decoration-color:#86efac; }
.kb-item-tag { font-size:.6rem; font-weight:700; padding:1px 6px; border-radius:5px; letter-spacing:.02em; flex-shrink:0; }
.kb-item-tag.cad { background:#dbeafe; color:#1d4ed8; }
.kb-item-tag.grc { background:#f3e8ff; color:#7e22ce; }
.kb-item-tag.serralheria { background:#fde3cf; color:#c2570f; }
.kb-scan-btn { margin-top:6px; width:100%; border:none; background:var(--dbn-blue); color:#fff; font-size:.7rem; font-weight:600; padding:6px; border-radius:7px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:5px; transition:background .15s; }
.kb-scan-btn:hover { background:var(--dbn-blue-deep); }
.kb-scan-btn:disabled { opacity:.5; cursor:not-allowed; }
.kb-empty-hint { font-size:.72rem; color:#cbd5e1; margin-top:8px; }
.kb-actions { display:flex; gap:6px; margin-top:11px; flex-wrap:wrap; }
.kb-btn-advance { border:none; font-size:.71rem; font-weight:700; padding:6px 12px; border-radius:7px; cursor:pointer; background:var(--dbn-orange); color:#fff; transition:filter .15s; }
.kb-btn-advance:hover:not(:disabled) { filter:brightness(1.05); }
.kb-btn-advance:disabled { background:#e2e8f0; color:#94a3b8; cursor:not-allowed; }
.kb-btn-advance-forcado { background:#dc2626; box-shadow:0 0 0 2px #fecaca; }
.kb-btn-back { border:1px solid #e2e8f0; background:#fff; color:#475569; font-size:.71rem; font-weight:600; padding:6px 12px; border-radius:7px; cursor:pointer; }
.kb-btn-back:hover { background:#f1f5f9; }
.kb-btn-delete { border:none; background:transparent; color:#ef4444; font-size:.71rem; font-weight:600; padding:6px 8px; cursor:pointer; border-radius:7px; }
.kb-btn-delete:hover { background:#fee2e2; }
.kb-btn-delete:disabled { opacity:.5; cursor:not-allowed; }
.kb-badge-premoldado { display:inline-flex; align-items:center; gap:3px; background:#fef3c7; color:#92400e; font-size:.62rem; padding:2px 8px; border-radius:99px; font-weight:700; margin-top:4px; }
/* ==================== MODO NOTURNO ====================
App usa Tailwind via CDN (sem build), então não dá pra usar a
variante dark: do Tailwind direto nas classes existentes de cada
componente sem reescrever centenas de arquivos. Em vez disso, essa
camada sobrescreve por seletor CSS os padrões de cor MAIS usados no
app inteiro (bg-white, bg-gray-50/100, text-gray-*, border, shadow,
inputs, e as classes customizadas .pcp- / .kb- / .stat-card /etc) toda
vez que tem a classe .dark — aplicada/removida e persistida
em localStorage por js/app.js (useState modoEscuro). Cobre a
grande maioria das telas sem precisar tocar em cada arquivo, mas
cores fixas via hex inline (style={{color:'#1a3b5c'}}) nos poucos
lugares que usam isso continuam com a cor original — aceitável,
ainda fica legível no fundo escuro. */
:root.dark { --dbn-blue-light:#1e2a3d; --dbn-orange-light:#3a2413; --dbn-blue-text:#dbe6f2; }
/* Avisa o navegador a desenhar os controles NATIVOS (menu do |