2 tamb�m �trave� o grid */
#estruturaProduto .content-section ul#malha li.header-row > div:nth-child(2){
min-width: 0;
}
/* � c�lulas alinhadas � */
#estruturaProduto .content-section ul#malha li.header-row > *,
#estruturaProduto .content-section ul#malha li:not(.category-header):not(.header-row) > *{
justify-self:start;
margin:0; width:auto;
}
/* � cabe�alhos de categoria (full-width) � */
#estruturaProduto .content-section ul#malha li.category-header{
display:block;
background:rgba(144,119,119,.41);
font-size:1.1em;
padding:8px 18px;
cursor:default;
}
/* � remove pontinho verde e recuos na descri��o � */
#estruturaProduto #malha .status-circle{ display:none; }
/* Descri��o (2� coluna) � uma linha com ��� e sem invadir QTD */
#estruturaProduto #malha .status{
display:block;
margin:0; padding:0;
min-width: 0; /* permite encolher dentro do grid */
overflow: hidden; /* corta o excedente */
text-overflow: ellipsis; /* mostra ��� */
white-space: nowrap; /* 1 linha */
cursor: help; /* indica tooltip nativo (title) */
}
#estruturaProduto #malha .status-text{ margin-left:0; }
/* � centraliza valores num�ricos � */
#estruturaProduto #malha .qtd,
#estruturaProduto #malha .unidade,
#estruturaProduto #malha .custo-real{
text-align:center;
}
/* � centraliza o bot�o �Editar� (6.� coluna) � */
#estruturaProduto #malha .button-wrapper{
display:flex;
justify-content:center;
}
/* -- Destaque visual do cabe�alho sticky ------------------------- */
#estruturaProduto .content-section ul#malha li.header-row{
background: rgba(16,18,27,0.92); /* fundo bem mais opaco */
backdrop-filter: blur(4px); /* leve desfoque atr�s (edge) */
border-bottom: 1px solid var(--border-color);
}
/* (opcional) se quiser um efeito �barra flutuante� ainda mais vis�vel */
#estruturaProduto .content-section ul#malha li.header-row::after{
content:'';
position:absolute; left:0; right:0; bottom:-1px; height:1px;
background: var(--border-color); /* linha divis�ria fina */
}
/* === Estrutura de produto: fallback sem .content-section === */
#estruturaProduto ul#malha {
display: block;
list-style: none;
margin: 0;
padding: 0;
max-height: 600px;
overflow-y: auto;
overflow-x: auto; /* scroll horizontal se apertar */
}
/* Cabe�alho (6 colunas) */
#estruturaProduto ul#malha li.header-row{
display: grid;
grid-template-columns: 120px minmax(0,1fr) 60px 70px 90px 120px;
column-gap: 1rem;
align-items: center;
padding: 8px 18px;
position: sticky; top: 0; z-index: 2;
text-align: center;
}
#estruturaProduto ul#malha li.header-row > div:nth-child(1),
#estruturaProduto ul#malha li.header-row > div:nth-child(2){
text-align: left; /* C�digo e Descri��o � esquerda */
min-width: 0;
}
/* Linhas de dados (mesma grade do cabe�alho) */
#estruturaProduto ul#malha li:not(.category-header):not(.header-row){
display: grid;
grid-template-columns: 120px minmax(0,1fr) 60px 70px 90px 120px;
column-gap: 1rem;
align-items: center;
padding: 8px 18px;
}
/* 2� coluna pode encolher de verdade */
#estruturaProduto ul#malha li > div:nth-child(2){ min-width: 0; }
/* Texto da descri��o: ��� + tooltip nativo (title) */
#estruturaProduto ul#malha li > div.desc,
#estruturaProduto ul#malha li > div.status{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
cursor: help;
}
/* Centraliza num�ricos e o bot�o Editar (compat�vel com seu tema) */
#estruturaProduto #malha .qtd,
#estruturaProduto #malha .unidade,
#estruturaProduto #malha .custo-real { text-align: center; }
#estruturaProduto #malha .button-wrapper{
display: flex; justify-content: center;
}
/* --------------------------------------------------
Layout de Lista de Pe�as id�ntico � Estrutura de produto
-------------------------------------------------- */
/* ===== PCP: A��es + sub-estrutura (reaproveita o look da guia "Estrutura de produto") ===== */
/* bot�es de a��o na �ltima coluna */
/* PCP � c�lula de a��es (linhas): alinhada � ESQUERDA */
#listaPecasPCPList .acoes{
display:flex;
align-items:center;
justify-content:flex-start; /* <- era flex-end */
gap:8px;
}
/* PCP � for�a alinhamento � esquerda em todos os contextos da lista */
#listaPecasPCPList.grid-pecas li.data-row .acao,
#listaPecasPCPList.grid-pecas li.data-row .acoes{
display:flex;
align-items:center;
justify-content:flex-start !important;
gap:8px;
}
/* PCP � t�tulo da coluna �A��o� alinhado � ESQUERDA */
#listaPecasPCPList .header-row .acao,
#listaPecasPCPList .header-row .acoes,
#listaPecasPCPList .header-row > *:last-child{
justify-self:start !important;
text-align:left !important;
}
/* PCP � Centralizar o t�tulo da coluna "A��o" no cabe�alho */
#listaPecasPCPList.grid-pecas .header-row {
/* garante que o header use a mesma malha */
display: grid;
grid-template-columns: var(--pcp-grid);
}
/* todos os cabe�alhos viram flex para controle fino de alinhamento */
#listaPecasPCPList.grid-pecas .header-row > * {
display: flex;
align-items: center;
}
/* c�lula "A��o" (�ltima) centralizada */
#listaPecasPCPList.grid-pecas .header-row > *:last-child {
justify-content: center !important; /* centra conte�do */
text-align: center !important; /* texto central */
justify-self: stretch !important; /* evita travar � direita por regras antigas */
padding-right: 0 !important; /* remove empurr�o � direita, se houver */
}
/* PCP � evita centraliza��o herdada de outras �reas */
.data-row .acao{ justify-content:flex-start; }
#listaPecasPCPList .icon-btn{
width:28px; height:28px;
display:inline-flex; align-items:center; justify-content:center;
border-radius:8px; border:1px solid rgba(255,255,255,.10);
background: rgba(255,255,255,.06);
color:#fff; cursor:pointer;
transition: transform .08s ease, background .12s ease, border-color .12s ease;
}
#listaPecasPCPList .icon-btn:hover{ background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.16); transform: translateY(-1px); }
#listaPecasPCPList .icon-btn:active{ transform: translateY(0); }
#listaPecasPCPList .icon-btn .i{ width:18px; height:18px; display:block; }
#listaPecasPCPList .icon-btn svg,
#listaPecasPCPList .icon-btn svg *{ stroke: currentColor; fill: none; }
/* linha �sub-estrutura� logo abaixo da pe�a clicada */
#listaPecasPCPList li.sub-estrutura-row{ padding: 0; }
#listaPecasPCPList li.sub-estrutura-row > .sub-estrutura{
grid-column: 1 / -1;
margin: 8px 0 10px;
padding: 8px 10px 12px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
border-radius: 10px;
}
#listaPecasPCPList li.sub-estrutura-row .sub-title{
font-weight: 600; margin: 0 0 6px; opacity: .9;
}
/* grid interna (simplificada � mesma vibe da guia Estrutura) */
#listaPecasPCPList li.sub-estrutura-row ul.malha-sub{
list-style: none; margin: 0; padding: 0;
}
/* Grid das linhas da sub-estrutura: Cod | Desc | Un | Qtd | Custo | A��es */
#listaPecasPCPList li.sub-estrutura-row ul.malha-sub li{
display: grid;
grid-template-columns: 140px minmax(260px,0.75fr) 70px 80px 90px minmax(168px,0.35fr);
column-gap: 12px;
align-items: center;
padding: 6px 12px;
}
#listaPecasPCPList li.sub-estrutura-row ul.malha-sub li .desc{
min-width: 0; /* habilita ellipsis na grid */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
#listaPecasPCPList li.sub-estrutura-row ul.malha-sub li .acao{
display: flex;
justify-content: flex-end;
align-items: center;
gap: 8px;
min-width: 168px;
}
#listaPecasPCPList li.sub-estrutura-row ul.malha-sub li .acao .icon-btn{
flex: 0 0 auto;
width: 32px;
height: 32px;
padding: 6px;
}
#listaPecasTab .content-section ul#listaPecasList {
display: block;
list-style: none;
margin: 0;
padding: 0;
max-height: 600px; /* altura fixa com scroll */
overflow-y: auto;
overflow-x: auto;
}
#listaPecasTab .content-section ul#listaPecasList li.header-row {
display: grid;
grid-template-columns:
120px /* C�digo */
minmax(220px,1fr) /* Descri��o */
60px /* QTD */
70px /* Unidade */
90px /* Valor sugerido */
80px; /* Abrir */
column-gap: 1rem;
align-items: center;
padding: 8px 18px;
position: sticky; top: 0; z-index: 2;
background: rgba(16,18,27,0.92);
backdrop-filter: blur(4px);
border-bottom: 1px solid var(--border-color);
font-weight: bold;
text-align: center;
}
#listaPecasTab .content-section ul#listaPecasList li.header-row div:nth-child(-n+2) {
text-align: left; /* C�digo e Descri��o � esquerda */
}
#listaPecasTab .content-section ul#listaPecasList li:not(.category-header):not(.header-row) {
display: grid;
grid-template-columns:
120px minmax(220px,1fr) 60px 70px 90px 80px;
column-gap: 1rem;
align-items: center;
padding: 8px 18px;
}
#listaPecasTab .content-section ul#listaPecasList li.category-header {
display: block;
background: rgba(144,119,119,0.41);
font-size: 1.1em;
padding: 8px 18px;
cursor: default;
}
/* remove pontinho e recuo na descri��o */
#listaPecasTab #listaPecasList .status-circle { display: none; }
#listaPecasTab #listaPecasList .status {
display: block;
margin: 0;
padding: 0;
white-space: normal;
}
#listaPecasTab #listaPecasList .status-text {
margin-left: 0;
word-break: break-word;
}
/* centraliza colunas num�ricas */
#listaPecasTab #listaPecasList .qtd,
#listaPecasTab #listaPecasList .unidade,
#listaPecasTab #listaPecasList .valor {
text-align: center;
}
/* bot�o �Abrir� centralizado */
#listaPecasTab #listaPecasList .button-wrapper {
width: auto;
display: flex;
justify-content: center;
}
/* ajusta largura das colunas para n�o herdar os estilos globais */
#listaPecasTab #listaPecasList .products,
#listaPecasTab #listaPecasList .status {
width: auto;
margin-left: 0;
}
#listaPecasTab #listaPecasList .button-wrapper .status-button {
padding: 6px 18px;
}
/* submenu (detalhes) dentro da Estrutura de produto */
#estruturaProduto #malha .submenu{
grid-column: 1 / -1; /* ocupa todas as colunas */
padding: 8px 18px 8px calc(120px + 1rem); /* recuo alinhado ao texto */
background: rgba(255,255,255,.04); /* leve contraste */
font-size: 14px;
line-height: 1.4em;
}
#estruturaProduto #malha .submenu ul{
margin:0; padding:0; list-style:none;
}
#estruturaProduto #malha .submenu li + li{
margin-top:4px;
}
/* -------------------------------------------------
CSS original do seu form (cole TODO este bloco)
� lembrando de manter o @import do Montserrat no topo
------------------------------------------------- */
/* ----------- Scoped Form CSS (cole aqui) ----------- */
.auth-popup,
.auth-popup * {
box-sizing: border-box;
outline: none;
}
.auth-popup {
background: #f6f5f7;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-family: "Montserrat", sans-serif;
width: 768px;
max-width: 100%;
min-height: 480px;
margin: auto;
position: relative;
overflow: hidden;
border-radius: 10px;
box-shadow: 0 14px 28px rgba(0,0,0,0.25),
0 10px 10px rgba(0,0,0,0.22);
}
.auth-popup h1 {
font-weight: bold;
margin: 0;
}
.auth-popup h2 {
text-align: center;
}
.auth-popup p {
font-size: 14px;
font-weight: 100;
line-height: 20px;
letter-spacing: 0.5px;
margin: 20px 0 30px;
}
.auth-popup span {
font-size: 12px;
}
.auth-popup a {
color: #333;
font-size: 14px;
text-decoration: none;
margin: 15px 0;
}
.auth-popup button {
border-radius: 20px;
border: 1px solid #ff4b2b;
background-color: #ff4b2b;
color: #fff;
font-size: 12px;
font-weight: bold;
padding: 12px 45px;
letter-spacing: 1px;
text-transform: uppercase;
transition: transform 80ms ease-in;
}
.auth-popup button:active {
transform: scale(0.95);
}
.auth-popup button:focus {
outline: none;
}
.auth-popup button.ghost {
background-color: transparent;
border-color: #fff;
}
.auth-popup form {
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 50px;
height: 100%;
text-align: center;
}
.auth-popup input {
background-color: #eee;
border: none;
padding: 12px 15px;
margin: 8px 0;
width: 100%;
}
.auth-popup .container {
width: 100%;
max-width: 768px;
min-height: 480px;
position: relative;
overflow: hidden;
transition: all 0.6s ease-in-out;
}
.auth-popup .form-container {
position: absolute;
top: 0;
height: 100%;
transition: all 0.6s ease-in-out;
}
.auth-popup .sign-in-container {
left: 0;
width: 50%;
z-index: 2;
}
.auth-popup .container.right-panel-active .sign-in-container {
transform: translateX(100%);
}
.auth-popup .sign-up-container {
left: 0;
width: 50%;
opacity: 0;
z-index: 1;
}
.auth-popup .container.right-panel-active .sign-up-container {
transform: translateX(100%);
opacity: 1;
z-index: 5;
animation: show 0.6s;
}
@keyframes show {
0%, 49.99% {
opacity: 0;
z-index: 1;
}
50%, 100% {
opacity: 1;
z-index: 5;
}
}
.auth-popup .overlay-container {
position: absolute;
top: 0;
left: 50%;
width: 50%;
height: 100%;
overflow: hidden;
transition: transform 0.6s ease-in-out;
z-index: 100;
}
.auth-popup .container.right-panel-active .overlay-container {
transform: translateX(-100%);
}
.auth-popup .overlay {
background: #002547;
background: -webkit-linear-gradient(to right, #E72D34, #002547);
background: linear-gradient(to right, #E72D34, #002547);
background-repeat: no-repeat;
background-size: cover;
background-position: 0 0;
color: #FFFFFF;
position: relative;
left: -100%;
height: 100%;
width: 200%;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
}
.auth-popup .container.right-panel-active .overlay {
transform: translateX(50%);
position: relative; /* J� definido, mas refor�a o contexto */
}
.auth-popup .overlay-panel {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 40px;
text-align: center;
top: 0;
height: 100%;
width: 50%;
transition: transform 0.6s ease-in-out;
}
.auth-popup .overlay-left {
transform: translateX(-20%);
}
.auth-popup .container.right-panel-active .overlay-left {
transform: translateX(0);
}
.auth-popup .overlay-right {
right: 0;
transform: translateX(0);
}
.auth-popup .container.right-panel-active .overlay-right {
transform: translateX(20%);
}
.auth-popup .social-container {
margin: 20px 0;
}
.auth-popup .social-container a {
border: 1px solid #ddd;
border-radius: 50%;
display: inline-flex;
justify-content: center;
align-items: center;
margin: 0 5px;
height: 40px;
width: 40px;
}
.auth-popup footer {
background-color: #222;
color: #fff;
font-size: 14px;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
}
.auth-popup footer p {
margin: 10px 0;
}
.auth-popup footer i {
color: red;
}
.auth-popup footer a {
color: #3c97bf;
text-decoration: none;
}
/* bot�o �ה */
.auth-popup .close-auth {
position: absolute;
top: 1rem; /* afasta 16px do topo do modal */
right: 1rem; /* afasta 16px da borda direita */
background: none;
border: none;
font-size: 1.5rem; /* ou ajuste como preferir */
line-height: 1;
cursor: pointer;
color: #333; /* mesma cor dos t�tulos */
padding: 0;
}
/* ----------------------------------------------------------- */
.title-wrapper { display:flex; align-items:center; gap:0.5em; }
#estoqueSpinner { /* clone exato do productSpinner */
display:block; width:50px; height:50px; margin:0; position:relative;
}
#estoqueSpinner svg { width:100%; height:100%; }
#svgEst circle { stroke-dashoffset:0; transition:stroke-dashoffset 1s linear;
stroke:#666; stroke-width:0.5em; }
#svgEst #barEst { stroke:#ff9f1e; } /* mesma cor */
#estoqueSpinner:after{
content:attr(data-pct) "%"; position:absolute; left:50%; top:50%;
transform:translate(-50%,-50%); font-size:0.8em; line-height:1;
}
/* --- spinner de Estrutura de produto --------------------------------- */
.spinner-box {
display: flex;
align-items: center;
gap: 0.5em; /* dist�ncia entre c�rculo e texto */
}
#estoqueSpinner {
display: block;
width: 50px;
height: 50px;
margin: 0;
position: relative;
}
#estoqueSpinner svg { width: 100%; height: 100%; }
#svgEst circle {
stroke-dashoffset: 0;
transition: stroke-dashoffset 1s linear;
stroke: #666;
stroke-width: 0.5em;
}
#svgEst #barEst {
stroke: #ff9f1e;
}
#estoqueSpinner:after {
content: attr(data-pct) "%";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size: 0.8em;
line-height: 1;
}
.spinner-label {
font-size: 0.9em;
color: #666;
white-space: nowrap;
}
/* --- Faz o sub-painel de Detalhes ocupar tudo e rolar internamente --- */
/* ==============================
CONTROLE DE TAMANHO + SCROLL
============================== */
/* ======================================
1) CONTROLE DE ALTURA + SCROLL DAS LISTAS
====================================== */
:root {
--inner-max-items: 8; /* quantas linhas quer ver sem scroll */
--inner-row-height: 40px; /* altura de cada
que � duplicado */
li.duplicado{
/* j� existe `position:relative` nos cards que tinham o span,
mas garantimos para todos: */
position:relative;
}
/* sobrep�e 50 % � direita em vermelho */
li.duplicado::after{
content:'';
position:absolute;
top:0;
right:0;
width:2%; /* metade do card */
height:100%;
background:#F44336; /* vermelho alerta */
border-top-right-radius:4px; /* mant�m o mesmo arredondado */
border-bottom-right-radius:4px; /* usado nos seus cards */
pointer-events:none; /* n�o atrapalha drag & drop */
}
/* = Container Geral dos Detalhes = */
.detalhes-wrapper {
/* Use cor de fundo suave para destacar sobre o restante da p�gina */
background-color: #f5f7fa;
border-radius: 8px;
padding: 1.5rem;
/* Sombra suave para �levantar� o cart�o */
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
margin: 1rem 0;
}
/* = Cabe�alho dos Dados do Pedido = */
.detalhes-header {
display: flex;
flex-wrap: wrap;
gap: 2rem;
margin-bottom: 1.5rem;
}
/* Cada bloco (Quantidade / Observa��o) fica num �cardzinho� secund�rio */
.campo-detalhe {
display: flex;
flex-direction: column;
background-color: #ffffff;
border-radius: 6px;
padding: 0.75rem 1rem;
/* Borda fina para destacar levemente */
border: 1px solid #e1e6ee;
min-width: 200px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
.campo-detalhe .label-detalhe {
font-weight: 600;
font-size: 0.9rem;
color: #334155;
margin-bottom: 0.25rem;
}
.campo-detalhe .valor-detalhe {
font-size: 1.1rem;
color: #1e293b;
}
/* = Tabela de Itens = */
.tabela-detalhes {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background-color: #ffffff;
border-radius: 6px;
overflow: hidden;
/* Sombra sutil para o �cart�o de tabela� */
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
.tabela-detalhes thead {
background-color: #0284c7; /* Azul-acento; ajuste conforme tema */
}
.tabela-detalhes th,
.tabela-detalhes td {
padding: 0.75rem 1rem;
text-align: left;
font-size: 0.95rem;
color: #1e293b;
}
.tabela-detalhes th {
font-weight: 600;
color: #ffffff;
border-bottom: 1px solid #e2e8f0;
}
.tabela-detalhes tbody tr {
background-color: #ffffff;
}
/* Alternar cor de fundo nas linhas para facilitar leitura */
.tabela-detalhes tbody tr:nth-child(even) {
background-color: #f8fafc;
}
/* Efeito hover para destacar a linha */
.tabela-detalhes tbody tr:hover {
background-color: #e2e8f0;
}
/* ===== Mensagem de Erro / Loading ===== */
.loading-details,
.fault-message {
font-size: 1rem;
color: #475569;
text-align: center;
padding: 1rem;
background-color: #ffffff;
border-radius: 6px;
border: 1px solid #e2e8f0;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
margin: 1rem 0;
}
.fault-message {
color: #b91c1c;
background-color: #fef2f2;
border-color: #fecaca;
}
/* ===== Ajustes de Responsividade ===== */
@media (max-width: 768px) {
.detalhes-header {
flex-direction: column;
gap: 1rem;
}
.campo-detalhe {
width: 100%;
}
.tabela-detalhes th,
.tabela-detalhes td {
padding: 0.5rem 0.75rem;
font-size: 0.9rem;
}
}
/* ===== Estilo unificado para todos os �cones em header-profile ===== */
/* ===== Header � �cones do perfil ===== */
.header-profile{
margin-left:auto; /* cola tudo na direita do header */
display:flex;
align-items:center;
gap:16px; /* dist�ncia IGUAL entre todos os filhos */
padding-left:40px; /* recuo igual ao campo de busca (opcional)*/
}
/* sinos / impressora / nuvem */
.header-profile i,
.header-profile svg{
font-size:1.4rem; /* mesmo �tamanho visual� */
color:#f9fafb;
cursor:pointer;
transition:transform .2s,color .2s;
}
.header-profile i:hover,
.header-profile svg:hover{
transform:scale(1.1);
color:var(--theme-color);
}
/* badge azul do sino */
.notification{
position:relative;
}
.notification-number{
position:absolute;
top:-6px;right:-6px;
width:16px;height:16px;
background:#3a6df0;color:#fff;
border-radius:50%;font-size:10px;
display:flex;align-items:center;justify-content:center;
}
/* badge de chamados abertos no ícone headset */
#menu-producao-gemba {
cursor: pointer;
position: relative;
}
#chamado-icon,
#aprovacao-compras-icon {
position: relative;
}
.chamado-badge {
position: absolute;
top: -6px;
right: -8px;
min-width: 16px;
height: 16px;
padding: 0 4px;
border-radius: 9px;
background: #dc2626;
color: #fff;
font-size: 10px;
font-weight: 700;
line-height: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
pointer-events: none;
font-family: system-ui, -apple-system, sans-serif;
font-style: normal;
}
/* foto do usu�rio */
.profile-img{
width:32px;height:32px;
border-radius:50%;
object-fit:cover;
border:2px solid var(--theme-color);
margin-left:22px;
flex-shrink:0;
position:relative;
}
.profile-img { cursor: pointer; }
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:999}
.modal.is-active{display:flex;justify-content:center;align-items:center}
.modal-content{background:#fff;border-radius:8px;padding:1.5rem;max-height:80vh;
overflow:auto;width:min(92vw,500px);box-shadow:0 6px 18px #0003}
/* Solicitação de compra sem cadastro: mesmo sistema visual do modal Compras.
IDs e estrutura existentes são preservados para não alterar o fluxo. */
#modalCatalogoOmie.catalogo-compra-modal {
align-items: center !important;
padding: 12px !important;
background: rgba(15, 23, 42, .62);
}
#modalCatalogoOmie .catalogo-compra-modal__content {
box-sizing: border-box;
width: min(1440px, calc(100vw - 32px)) !important;
max-width: 1440px !important;
max-height: min(900px, calc(100dvh - 32px)) !important;
padding: 0 !important;
overflow: hidden !important;
border: 1px solid #dbe3ef;
border-radius: 14px;
background: #f4f7fb;
box-shadow: 0 24px 60px rgba(15, 23, 42, .28);
display: flex;
flex-direction: column;
}
#modalCatalogoOmie .modal-header {
flex: 0 0 auto;
min-height: 76px;
box-sizing: border-box;
padding: 20px 26px !important;
border-bottom: 1px solid #dbe3ef !important;
background: #fff;
}
#modalCatalogoOmie .modal-header h3 {
color: #1e293b;
font-size: 20px;
}
#modalCatalogoOmie .modal-header h3 i { color: #f59e0b !important; }
#modalCatalogoOmie .modal-close {
color: #64748b;
width: 36px;
height: 36px;
border-radius: 8px;
}
#modalCatalogoOmie .modal-close:hover { background: #eff6ff; color: #2563eb; }
#modalCatalogoOmie .modal-body {
flex: 1 1 auto;
min-height: 0;
overflow: auto;
padding: 22px !important;
background: #e8eef6;
}
#modalCatalogoOmie .catalogo-compra-modal__grid {
grid-template-columns: minmax(280px, .92fr) minmax(360px, 1fr) minmax(300px, .92fr) !important;
gap: 16px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
}
#modalCatalogoOmie .catalogo-compra-modal__grid > div,
#modalCatalogoOmie #catalogoPreCadastroBloco {
min-width: 0;
box-sizing: border-box;
padding: 16px !important;
border: 1px solid #b9c7d9 !important;
border-radius: 10px !important;
background: #fff !important;
box-shadow: 0 3px 10px rgba(15, 23, 42, .08);
}
#modalCatalogoOmie #catalogoPreCadastroBloco { background: #fff !important; }
#modalCatalogoOmie label { color: #243b5a !important; font-size: 12px !important; }
#modalCatalogoOmie .catalogo-form-section > div > label,
#modalCatalogoOmie #catalogoPreCadastroBloco > div:first-child {
color: #163f7a !important;
font-weight: 800 !important;
}
#modalCatalogoOmie input:not([type="file"]),
#modalCatalogoOmie select,
#modalCatalogoOmie textarea {
box-sizing: border-box;
min-height: 42px;
border: 1.5px solid #9eb1c8 !important;
border-radius: 8px !important;
color: #172b4d !important;
background: #fff !important;
box-shadow: inset 0 1px 2px rgba(15, 23, 42, .04);
}
#modalCatalogoOmie input:not([type="file"]):hover,
#modalCatalogoOmie select:hover,
#modalCatalogoOmie textarea:hover { border-color: #6483aa !important; }
#modalCatalogoOmie textarea { min-height: 86px; }
#modalCatalogoOmie input:focus,
#modalCatalogoOmie select:focus,
#modalCatalogoOmie textarea:focus {
outline: 3px solid rgba(37, 99, 235, .16);
border-color: #2563eb !important;
}
#modalCatalogoOmie #catalogoRetornoModeloTooltip,
#modalCatalogoOmie #catalogoPreCadPrefixoHint {
border-radius: 8px !important;
border: 1px solid #9fc3ef !important;
background: #edf6ff !important;
}
#modalCatalogoOmie .catalogo-photo-field__drop {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 16px 12px;
border: 2px dashed #6f91ba;
border-radius: 8px;
background: #f6f9fd;
color: #274b75;
text-align: center;
transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
#modalCatalogoOmie .catalogo-photo-field:focus-visible .catalogo-photo-field__drop,
#modalCatalogoOmie .catalogo-photo-field.is-dragging .catalogo-photo-field__drop {
border-color: #2563eb;
background: #eaf3ff;
box-shadow: 0 0 0 3px rgba(37, 99, 235, .14);
}
#modalCatalogoOmie .catalogo-photo-field__drop > i { font-size: 26px; color: #2563eb; }
#modalCatalogoOmie .catalogo-photo-field__copy { display: flex; flex-direction: column; gap: 2px; }
#modalCatalogoOmie .catalogo-photo-field__copy strong { color: #172b4d; font-size: 13px; }
#modalCatalogoOmie .catalogo-photo-field__copy span { color: #526987; font-size: 12px; }
#modalCatalogoOmie .catalogo-photo-field__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; }
#modalCatalogoOmie .catalogo-photo-field__button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 42px;
box-sizing: border-box;
padding: 9px 10px;
border: 1px solid #7893b3 !important;
border-radius: 7px;
background: #fff;
color: #183b66 !important;
font-size: 12px !important;
font-weight: 750;
cursor: pointer;
}
#modalCatalogoOmie .catalogo-photo-field__button:hover { border-color: #2563eb !important; background: #eaf3ff; color: #174ea6 !important; }
#modalCatalogoOmie .catalogo-photo-field__button--paste { background: #2563eb; border-color: #2563eb !important; color: #fff !important; }
#modalCatalogoOmie .catalogo-photo-field__button--paste:hover { background: #1d4ed8; color: #fff !important; }
#modalCatalogoOmie #catalogoPreCadFoto { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
#modalCatalogoOmie .catalogo-photo-field__preview { display: grid; grid-template-columns: 54px minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px; border: 1px solid #9eb1c8; border-radius: 8px; background: #fff; }
#modalCatalogoOmie .catalogo-photo-field__preview[hidden] { display: none; }
#modalCatalogoOmie .catalogo-photo-field__preview img { width: 54px; height: 54px; border-radius: 6px; border: 1px solid #c3cfdd; background: #f8fafc; object-fit: contain; }
#modalCatalogoOmie .catalogo-photo-field__preview span { min-width: 0; overflow-wrap: anywhere; color: #334e68; font-size: 12px; }
#modalCatalogoOmie #catalogoBotaoAdicionarNaoCadastrado button {
min-height: 48px;
border-radius: 8px !important;
background: #2563eb !important;
box-shadow: 0 4px 12px rgba(37, 99, 235, .22) !important;
}
#modalCatalogoOmie #catalogoBotaoAdicionarNaoCadastrado button:hover { background: #1d4ed8 !important; }
#modalCatalogoOmie .catalogo-item-adder__descricao-label,
#modalCatalogoOmie .catalogo-item-adder__quantidade > label {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
#modalCatalogoOmie .catalogo-item-adder__quantidade {
display: contents;
}
@media (max-width: 1100px) {
#modalCatalogoOmie .catalogo-compra-modal__grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
#modalCatalogoOmie #catalogoColuna3 { grid-column: 1 / -1; }
}
@media (max-width: 820px) {
#modalCatalogoOmie.catalogo-compra-modal {
align-items: stretch !important;
padding: 0 !important;
overscroll-behavior: contain;
}
#modalCatalogoOmie .catalogo-compra-modal__content {
width: 100vw !important;
max-width: 100vw !important;
height: 100dvh;
max-height: 100dvh !important;
border: 0;
border-radius: 0;
}
#modalCatalogoOmie .modal-header {
position: sticky;
top: 0;
z-index: 3;
min-height: 60px;
padding: max(10px, env(safe-area-inset-top)) 12px 10px !important;
}
#modalCatalogoOmie .modal-header h3 { min-width: 0; font-size: 18px; line-height: 1.25; }
#modalCatalogoOmie .modal-close {
min-width: 44px;
width: 44px;
height: 44px;
font-size: 30px;
touch-action: manipulation;
}
#modalCatalogoOmie .modal-body {
padding: 10px 10px calc(24px + env(safe-area-inset-bottom)) !important;
overscroll-behavior: contain;
}
#modalCatalogoOmie .catalogo-compra-modal__grid {
grid-template-columns: minmax(0, 1fr) !important;
gap: 10px !important;
padding: 0 !important;
}
#modalCatalogoOmie #catalogoColuna3 { grid-column: auto; }
#modalCatalogoOmie .catalogo-compra-modal__grid > div,
#modalCatalogoOmie #catalogoPreCadastroBloco {
padding: 14px 12px !important;
border-radius: 8px !important;
}
#modalCatalogoOmie .catalogo-form-section--pre {
padding: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
#modalCatalogoOmie label { font-size: 14px !important; line-height: 1.35; }
#modalCatalogoOmie input:not([type="file"]),
#modalCatalogoOmie select,
#modalCatalogoOmie textarea {
width: 100% !important;
min-width: 0;
min-height: 48px;
padding: 12px !important;
font-size: 16px !important;
line-height: 1.4;
}
#modalCatalogoOmie textarea {
min-height: 120px !important;
height: auto !important;
}
#modalCatalogoOmie #catalogoObservacaoRecebimento { min-height: 104px !important; }
#modalCatalogoOmie #catalogoRetornoModeloTooltip,
#modalCatalogoOmie #catalogoPreCadPrefixoHint,
#modalCatalogoOmie .catalogo-upload-zone__hint {
font-size: 14px !important;
line-height: 1.45;
}
#modalCatalogoOmie .catalogo-pre-cad-dupla { grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; }
#modalCatalogoOmie #catalogoPreCadOrigem { gap: 8px !important; }
#modalCatalogoOmie #catalogoPreCadOrigem button {
min-height: 48px;
padding: 12px 8px !important;
font-size: 15px !important;
touch-action: manipulation;
}
#modalCatalogoOmie #catalogoPreCadMostrarFamilias {
min-height: 44px;
margin: -4px 0 -6px;
padding: 8px 0 !important;
font-size: 14px !important;
text-align: left;
touch-action: manipulation;
}
#modalCatalogoOmie input[type="file"] {
display: block;
box-sizing: border-box;
width: 100%;
max-width: 100%;
min-height: 48px;
padding: 6px;
overflow: hidden;
font-size: 14px !important;
color: #334155;
background: #f8fafc;
border: 1px solid #cbd9ea;
border-radius: 8px;
}
#modalCatalogoOmie input[type="file"]::file-selector-button {
min-height: 36px;
margin-right: 8px;
padding: 6px 10px;
border: 1px solid #94a3b8;
border-radius: 6px;
background: #fff;
color: #172b4d;
}
#modalCatalogoOmie .catalogo-item-adder {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(132px, .9fr) !important;
grid-template-areas:
"desc-label desc-label"
"desc desc"
"qty add";
gap: 8px !important;
align-items: end !important;
}
#modalCatalogoOmie .catalogo-item-adder__descricao-label {
position: static;
grid-area: desc-label;
width: auto;
height: auto;
margin: 0;
overflow: visible;
clip: auto;
white-space: normal;
}
#modalCatalogoOmie #catalogoDescricaoNaoCadastrado {
grid-area: desc;
min-height: 104px !important;
}
#modalCatalogoOmie .catalogo-item-adder__quantidade {
grid-area: qty;
display: flex;
min-width: 0;
flex-direction: column;
gap: 6px;
}
#modalCatalogoOmie .catalogo-item-adder__quantidade > label {
position: static;
width: auto;
height: auto;
margin: 0;
overflow: visible;
clip: auto;
white-space: normal;
}
#modalCatalogoOmie #catalogoDescricaoQtd { width: 100% !important; }
#modalCatalogoOmie #catalogoDescricaoAddBtn {
grid-area: add;
width: 100%;
min-height: 48px;
padding: 12px !important;
font-size: 15px !important;
touch-action: manipulation;
}
#modalCatalogoOmie #catalogoDescricaoTags [data-keyword] {
display: grid !important;
grid-template-columns: minmax(0, 1fr) 88px 44px;
gap: 8px !important;
align-items: center !important;
}
#modalCatalogoOmie #catalogoDescricaoTags [data-keyword] input:first-child {
grid-column: 1 / -1;
min-height: 56px;
white-space: normal;
}
#modalCatalogoOmie #catalogoDescricaoTags [data-keyword] input[type="number"] {
grid-column: 2;
}
#modalCatalogoOmie #catalogoDescricaoTags [data-keyword] button {
grid-column: 3;
min-width: 44px;
width: 44px !important;
min-height: 44px;
height: 44px !important;
}
#modalCatalogoOmie .catalogo-upload-zone { padding: 0 !important; }
#modalCatalogoOmie .catalogo-upload-zone button { min-height: 48px; font-size: 15px !important; touch-action: manipulation; }
#modalCatalogoOmie #catalogoBotaoAdicionarNaoCadastrado button {
min-height: 52px;
padding: 14px 16px !important;
font-size: 16px !important;
touch-action: manipulation;
}
}
/* Z-index espec�fico para modais de compras */
#modalAprovacaoRequisicao{position:fixed!important;z-index:10002!important}
#modalObservacaoRetificacao{position:fixed!important;z-index:10005!important}
.close-modal{cursor:pointer;font-size:1.3rem;float:right;margin-left:auto}
.etiquetas-list li{display:flex;justify-content:space-between;align-items:center;
padding:.35rem 0;border-bottom:1px solid #ddd}
.btn-print{padding:.25rem .7rem;font-size:.9rem}
#etiquetasModal.is-active{
visibility: visible;
opacity: 1;
}
#etiquetasModal .btn-print{
padding:4px 12px;
background:#3a6df0;
color:#fff;
border:none;
border-radius:20px;
cursor:pointer;
}
/* === 1. Modal de ETIQUETAS =============================== */
.modal-content,
.etiquetas-list li,
.etiquetas-list li span { color:#333; } /* texto cinza-escuro */
.etiquetas-list .btn-print { color:#fff; background:#3a6df0; }
.etiquetas-list .btn-print:hover { filter:brightness(1.1); }
/* === 2. Formul�rio de LOGIN =============================== */
.auth-popup form,
.auth-popup form h1,
.auth-popup form label,
.auth-popup form span { color:#333; }
.auth-popup form input { color:#333; }
.auth-popup form input::placeholder { color:#777; } /* placeholder cinza */
/* 1. Esconde por padr�o */
.kanban-column.empty .placeholder {
display: none;
}
/* 2. Mostra em dragover, sem anima��o piscante */
.kanban-column.empty.dragover .placeholder {
display: block;
animation: none !important; /* remove qualquer keyframe ligado */
opacity: 1 !important; /* for�a opacidade total */
border: 2px dashed #ccc; /* estilo est�tico de guia */
}
/* espa�o extra e placeholder est�tico */
.kanban-column.drop-expand {
padding-bottom: 60px; /* altura reservada */
transition: padding-bottom .2s ease;
}
.kanban-column.drop-expand .placeholder {
display: block; /* for�a exibi��o */
height: 50px; /* ajuste � altura do cart�o */
margin: 5px 0;
border: 2px dashed #888; /* guia visual */
opacity: 1 !important;
animation: none !important;
}
/* escondido por padr�o */
.kanban-column .placeholder {
display: none;
}
/* styling para o cart�o de loading */
.kanban-card.loading {
position: relative;
opacity: 0.6;
pointer-events: none;
}
/* a �barra� de progresso */
.loading-bar {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 4px;
background: #eee;
overflow: hidden;
}
.loading-bar .progress {
width: 0;
height: 100%;
background: #0b75c9;
animation: loading-anim 1.2s linear infinite;
}
@keyframes loading-anim {
0% { width: 0; }
50% { width: 100%; }
100% { width: 0; }
}
/* �cone de �+� junto ao t�tulo */
.kanban-header .add-btn {
margin-left: 8px;
cursor: pointer;
color: #fff;
transition: color .2s;
}
.kanban-header .add-btn:hover {
color: #0b75c9;
}
/* container de pesquisa oculto por padr�o */
.kanban-header .add-container {
display: none;
padding: 8px;
background: rgba(255,255,255,0.1);
}
.kanban-column.search-expand .kanban-header .add-container {
display: block;
}
/* estilo do input */
.kanban-header .add-search {
width: 100%;
padding: 6px 8px;
border-radius: 4px;
border: 1px solid #ccc;
}
/* container de resultados */
.add-results {
list-style: none;
margin: 4px 0 0;
padding: 0;
max-height: 200px;
overflow-y: auto;
background: #fff;
border: 1px solid #ccc;
border-radius: 4px;
z-index: 10;
position: relative;
}
/* cada item */
.add-results .result-item {
padding: 6px 8px;
cursor: pointer;
}
.add-results .result-item:hover {
background: #f0f0f0;
}
/* mensagem de erro no listbox */
.add-results .error {
color: red;
padding: 6px 8px;
}
/* ========= Estilo escuro para o listbox de resultados ========= */
.add-results {
background-color: #1F1F23; /* fundo escuro */
border: 1px solid #3A3A3C; /* borda sutil */
border-radius: 4px;
max-height: 200px;
overflow-y: auto;
padding: 4px 0;
margin-top: 4px;
}
/* Ajuste da cor padr�o do texto */
.add-results,
.add-results .result-item {
color: #E0E0E0; /* texto claro */
font-size: 0.9rem;
}
/* Cada item de resultado */
.add-results .result-item {
padding: 6px 12px;
cursor: pointer;
transition: background-color .15s;
}
/* Hover / foco */
.add-results .result-item:hover,
.add-results .result-item:focus {
background-color: #2A2A2E; /* leve realce */
}
/* Caso de erro */
.add-results .error {
color: #FF6B6B; /* vermelho suave */
padding: 6px 12px;
}
/* Scrollbar escura (Firefox) */
.add-results {
scrollbar-color: #555 #1F1F23;
}
/* Scrollbar escura (Webkit) */
.add-results::-webkit-scrollbar {
width: 8px;
}
.add-results::-webkit-scrollbar-thumb {
background-color: #555;
border-radius: 4px;
}
.add-results::-webkit-scrollbar-track {
background-color: #1F1F23;
}
/* --------------------------------------------------
Layout de Lista de Pe�as id�ntico � Estrutura de produto
-------------------------------------------------- */
#listaPecasPCP .content-section ul#listaPecasPCPList {
display: block;
list-style: none;
margin: 0;
padding: 0;
max-height: 600px;
overflow-y: auto;
overflow-x: auto;
}
#listaPecasPCP .content-section ul#listaPecasPCPList li.header-row {
display: grid;
grid-template-columns: var(--pcp-grid);
column-gap: 1rem;
align-items: center;
padding: 8px 18px;
position: sticky; top: 0; z-index: 2;
background: rgba(16,18,27,0.92);
backdrop-filter: blur(4px);
border-bottom: 1px solid var(--border-color);
font-weight: bold;
text-align: center;
}
#listaPecasPCP .content-section ul#listaPecasPCPList li.header-row div:nth-child(-n+2) {
text-align: left;
}
#listaPecasPCP .content-section ul#listaPecasPCPList li:not(.category-header):not(.header-row) {
display: grid;
grid-template-columns: var(--pcp-grid);
column-gap: 1rem;
align-items: center;
padding: 8px 18px;
}
#listaPecasPCP .content-section ul#listaPecasPCPList li.category-header {
display: block;
background: rgba(144,119,119,0.41);
font-size: 1.1em;
padding: 8px 18px;
cursor: default;
}
/* remove pontinho e recuo na descri��o */
#listaPecasPCP #listaPecasPCPList .status-circle { display: none; }
#listaPecasPCP #listaPecasPCPList .status {
display: block;
margin: 0;
padding: 0;
white-space: normal;
}
#listaPecasPCP #listaPecasPCPList .status-text {
margin-left: 0;
word-break: break-word;
}
#listaPecasPCP #listaPecasPCPList .qtd,
#listaPecasPCP #listaPecasPCPList .unidade,
#listaPecasPCP #listaPecasPCPList .valor {
text-align: center;
}
#listaPecasPCP #listaPecasPCPList .button-wrapper {
width: auto;
display: flex;
justify-content: center;
}
#listaPecasPCP #listaPecasPCPList .products,
#listaPecasPCP #listaPecasPCPList .status {
width: auto;
margin-left: 0;
}
#listaPecasPCP #listaPecasPCPList .button-wrapper .status-button {
padding: 6px 18px;
}
/* --- Bot�o ? ------------------------------------- */
.more-btn{
font-size:24px;
color:var(--theme-color); /* branco/lil�s do tema */
background:none;
border:none;
cursor:pointer;
display:none; /* ? come�a escondido */
}
.more-menu.open{ display:flex; }
.more-btn:hover{
color:var(--theme-color);
}
/* --- Dropdown oculto ----------------------------- */
.more-menu{
position:absolute;
top:58px; /* logo abaixo do cabe�alho de 58 px */
right:30px; /* mesmo padding do header */
display:none;
flex-direction:column;
min-width:160px;
background:var(--dropdown-bg);
border:1px solid var(--border-color);
border-radius:4px;
z-index:100;
}
.more-menu a{
padding:10px 16px;
color:var(--theme-color);
text-decoration:none;
white-space:nowrap;
}
.more-menu a:hover{
background:var(--dropdown-hover);
}
.more-menu.open{display:flex;}
.header{position:relative;} /* refer�ncia para o dropdown */
.header {
display: flex;
align-items: center;
padding: 0 30px;
gap: 0; /* j� tinha boa parte disso no seu CSS */
}
/* nav que pode �estourar� */
.header-menu {
flex: 1 1 auto;
display: flex;
overflow: hidden; /* corta o que n�o couber */
}
/* bot�o ? */
.more-btn {
flex: 0 0 auto;
font-size: 24px;
padding: 20px 16px;
background: none;
border: none;
cursor: pointer;
color: var(--inactive-color);
display: none; /* aparece s� quando houver abas ocultas */
}
/* dropdown */
.more-menu {
position: absolute;
top: 58px; /* logo abaixo da faixa */
right: 30px;
display: none;
flex-direction: column;
min-width: 160px;
background: var(--dropdown-bg);
border: 1px solid var(--border-color);
border-radius: 4px;
z-index: 100;
}
.more-menu a {
padding: 10px 16px;
color: var(--theme-color);
text-decoration: none;
white-space: nowrap;
}
.more-menu a:hover { background: var(--dropdown-hover); }
.more-menu.open { display: flex; }
/* valor de estoque em cinza claro para n�o poluir */
#listaPecasPCPList .est {
color: var(--inactive-color);
font-size: 0.9em;
}
/* ----- lista de pe�as PCP ----- */
#listaPecasPCPList li {
display: flex;
gap: .5rem;
align-items: center;
padding: .2rem .4rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#listaPecasPCPList .cod { font-weight: 600; min-width: 8rem; }
#listaPecasPCPList .desc { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
#listaPecasPCPList .qtd,
#listaPecasPCPList .est { margin-left: .5rem; flex-shrink: 0; }
/* estoque cr�tico */
#listaPecasPCPList .est.low {
color: #e74c3c; /* vermelho */
font-weight: 600;
}
#listaPecasPCPList li .unit {
color: #9fa3ad; /* cinza claro */
margin-left: 2px;
}
.code-bar .prod-code{
color:#d0d0d0; /* ajuste para combinar com seu tema dark */
}
.code-bar .plus-btn{
border:none;
background:none;
color:#8cf; /* cor de destaque � mude � vontade */
font-size:1.1rem;
cursor:pointer;
line-height:1;
padding:0 .25rem;
}
.code-bar .plus-btn:hover{
transform:scale(1.2);
}
/* faz o wrapper quebrar linha */
#listaPecasPCP .title-wrapper{
display: flex;
flex-wrap: wrap; /* ? permite nova linha */
align-items: center;
gap: .5rem;
}
/* ocupa a linha inteira */
.code-bar{
flex: 0 0 100%;
display: flex;
align-items: center;
gap: .75rem;
font-weight: 500;
font-size: 0.95rem;
}
#pcp-code-bar input[type="text"]{
flex:1;
min-width:220px;
padding:8px 12px;
border-radius:8px;
border:1px solid rgba(148,163,184,0.3);
background: rgba(15,23,42,0.55);
color:#f8fafc;
}
#pcp-code-bar input[type="text"]:focus{
outline:none;
border-color: rgba(94,234,212,0.55);
background: rgba(15,23,42,0.85);
}
/* bot�o de limpar filtros da lista PCP */
.clear-btn{
margin-left: 8px;
padding: 4px 10px;
font-size: 0.9rem;
background:#444;
color:#fff;
border:1px solid #555;
border-radius:4px;
cursor:pointer;
}
.clear-btn:hover{
background:#666;
}
/* linha dos filtros */
#listaPecasPCP .title-wrapper,
#listaPecasPCP .desc-wrapper{
display:flex;
align-items:center;
}
/* garante pequena folga entre campos */
#listaPecasPCP .title-wrapper > *:not(:last-child){
margin-right:8px;
}
/* campo de texto ocupa todo o espa�o que sobrar */
#descFilterPCP{
flex:1 1 auto;
}
/* bot�o-�cone �Limpar� */
.clear-icon{
flex:0 0 auto;
background:transparent;
border:none;
font-size:1.4rem; /* maior que o texto dos inputs */
line-height:1;
color:#bbb;
cursor:pointer;
}
.clear-icon:hover{
color:#fff;
}
/* ��� C�digo no topo da guia �Dados do produto� ��� */
#productTitle {
text-transform: uppercase;
}
/* cart�o que acabou de ser criado na coluna Aguardando prazo */
.flash-new {
background: #235c23 !important; /* verde escuro */
color: #fff; /* texto branco p/ contraste */
transition: background 0.8s ease;
}
/* ��� Tabelas do m�dulo Armaz�ns ��� */
table.tabela {
width: 100%;
border-collapse: collapse; /* cola linhas -> some o �pulo� */
border-spacing: 0;
color: #eee;
font-size: 0.9rem;
}
table.tabela thead {
background: #222;
text-transform: uppercase;
}
table.tabela th,
table.tabela td {
padding: 6px 8px;
border: 1px solid #444; /* linhas discretas */
}
/* Colunas orden�veis */
table.tabela th.sortable {
cursor: pointer;
user-select: none;
transition: background 0.2s;
}
table.tabela th.sortable:hover {
background: #333;
}
table.tabela th.sortable i {
margin-left: 4px;
font-size: 0.85em;
opacity: 0.5;
}
table.tabela th.sortable.sort-asc i,
table.tabela th.sortable.sort-desc i {
opacity: 1;
}
table.tabela th.sortable.sort-asc i::before {
content: '\f0de'; /* fa-sort-up */
}
table.tabela th.sortable.sort-desc i::before {
content: '\f0dd'; /* fa-sort-down */
}
table.tabela tbody tr:nth-child(even) { background: #2a2a2a; }
table.tabela tbody tr:hover { background: #333; }
table.tabela td.num {
text-align: right;
font-variant-numeric: tabular-nums; /* algarismos alinhados */
}
/* ��� Pagina��o ��� */
.almox-pager {
display: flex;
gap: 6px;
align-items: center;
justify-content: center; /* centraliza */
font-size: 0.9rem;
}
.almox-pager .btn.tiny {
padding: 2px 6px;
background: #2a2a2a;
border: 1px solid #444;
color: #eee;
cursor: pointer;
}
/* ��� �rea rol�vel em ambas as dire��es ��� */
.almox-wrapper {
max-height: 60vh; /* rolagem vertical */
overflow-y: auto;
overflow-x: auto; /* rolagem horizontal se precisar */
margin-bottom: 8px;
}
/* ��� Larguras fixas e retic�ncias ��� */
.almox-wrapper table {
table-layout: fixed; /* for�a as larguras abaixo */
width: 100%;
}
.almox-wrapper thead th {
position: sticky;
top: 0;
z-index: 5;
background: #222; /* refor�a cor quando estiver fixo */
}
.almox-wrapper tbody tr {
cursor: pointer;
}
.almox-wrapper tbody tr:active {
background: #3a3a3a;
}
/* 1� coluna � C�digo */
.almox-wrapper td:nth-child(1),
.almox-wrapper th:nth-child(1) {
width: 120px; /* ~? da largura anterior */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 2� coluna � Descri��o (retic�ncias) */
.almox-wrapper td:nth-child(2),
.almox-wrapper th:nth-child(2) {
width: 360px; /* ajuste conforme seu layout */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Demais colunas num�ricas � largura enxuta */
.almox-wrapper td:nth-child(n+3),
.almox-wrapper th:nth-child(n+3) {
width: 100px; /* estava 80px */
}
/* Ajuste fino de larguras ----------------------------------- */
.almox-wrapper th:nth-child(1),
.almox-wrapper td:nth-child(1) { width: 120px; } /* C�DIGO */
.almox-wrapper th:nth-child(2),
.almox-wrapper td:nth-child(2) { width: 320px; } /* DESCRI��O */
.almox-wrapper th:nth-child(n+3),
.almox-wrapper td:nth-child(n+3) { width: 100px; } /* num�ricas */
/* ��� campo de busca ��� */
.search-box {
margin-left: 12px;
padding: 4px 6px;
font-size: 0.85rem;
background: #1a1a1a;
border: 1px solid #444;
color: #eee;
border-radius: 4px;
width: 220px;
}
.search-box::placeholder { color:#777; }
/* ��� total CMC (� direita do campo de busca) ��� */
.cmc-total {
margin-left: 16px;
font-size: 0.85rem;
color: #bbb;
white-space: nowrap;
}
.producao-wrapper {
max-height: 60vh;
overflow-y: auto;
overflow-x: auto;
margin-bottom: 8px;
}
/* usa as mesmas larguras */
.producao-wrapper table { table-layout: fixed; width:100%; }
.producao-wrapper td:nth-child(1),
.producao-wrapper th:nth-child(1){ width:110px; white-space:nowrap; overflow:hidden;text-overflow:ellipsis; }
.producao-wrapper td:nth-child(2),
.producao-wrapper th:nth-child(2){ width:320px; white-space:nowrap; overflow:hidden;text-overflow:ellipsis; }
.producao-wrapper td:nth-child(n+3),
.producao-wrapper th:nth-child(n+3){ width:95px; }
/* � filtro por tipo � */
.filter-icon {
margin-left: 10px;
background: transparent;
border: none;
color: #ddd;
cursor: pointer;
}
.filter-icon:hover { color: #fff; }
.filter-panel {
position: absolute;
z-index: 10;
background: #1b1b1b;
border: 1px solid #444;
padding: 8px 10px;
border-radius: 6px;
max-height: 50vh;
overflow-y: auto;
box-shadow: 0 4px 12px rgba(0,0,0,.6);
min-width: 220px;
display: none;
flex-direction: column;
gap: 4px;
}
.filter-panel.is-open {
display: flex;
}
.filter-panel label {
display: flex;
align-items: center;
gap: 6px;
font-size: .85rem;
margin: 4px 0;
color: #eee;
}
.filter-panel label span {
flex: 1;
line-height: 1.2;
}
.filter-panel input[type="checkbox"] {
accent-color: #3fa7ff; /* azul */
width: 16px;
height: 16px;
flex-shrink: 0;
}
.almox-filter-controls {
display: flex;
align-items: center;
justify-content: flex-start;
padding: 4px 2px 8px;
margin-bottom: 6px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.almox-select-toggle {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
border-radius: 999px;
background: rgba(63, 167, 255, 0.14);
color: #d9ecff;
cursor: pointer;
font-size: 0.85rem;
transition: background 0.2s ease, color 0.2s ease;
}
.almox-select-toggle:hover {
background: rgba(63, 167, 255, 0.26);
color: #ffffff;
}
.almox-select-toggle input {
width: 18px;
height: 18px;
accent-color: #3fa7ff;
}
.almox-toggle-text {
white-space: nowrap;
}
.filter-panel .almox-filter-option {
margin: 2px 0;
}
.transferencia-wrapper {
margin-top: 12px;
}
.transferencia-wrapper .transferencia-placeholder {
text-align: center;
color: #aaa;
}
.transferencia-table tbody tr {
cursor: default;
}
.transferencia-controls {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-top: 10px;
}
.transferencia-search {
position: relative;
max-width: 480px;
flex: 1 1 320px;
}
.transferencia-search .search-box {
margin-left: 0;
width: 100%;
}
/* Dropdown de busca (mesmo visual do kanban) */
.transfer-search-dropdown {
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
z-index: 25;
display: none;
background: #141414;
border: 1px solid rgba(255,255,255,0.12);
border-radius: 4px;
box-shadow: 0 10px 22px rgba(0,0,0,0.45);
padding: 0;
}
.transfer-search-results {
list-style: none;
margin: 0;
padding: 0;
max-height: 200px;
overflow-y: auto;
background: transparent;
}
.transfer-search-results li {
display: flex;
gap: 12px;
align-items: center;
padding: 8px 10px;
border-bottom: 1px solid rgba(255,255,255,0.08);
cursor: pointer;
color: #fff;
font-size: 0.9rem;
}
.transfer-search-results li:last-child { border-bottom: none; }
.transfer-search-results li:hover { background: #1f1f1f; }
.transfer-search-results li.info,
.transfer-search-results li.no-results {
justify-content: center;
font-style: italic;
cursor: default;
background: #1a1a1a;
color: #d0d4dc;
}
.transfer-search-results li.error {
justify-content: center;
font-style: italic;
cursor: default;
background: #2a0f15;
color: #ffb4b4;
}
.transfer-search-results li span.codigo {
flex: 0 0 140px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.transfer-search-results li span.descricao {
flex: 1 1 auto;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.transferencia-locais {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, auto));
gap: 12px 16px;
align-items: end;
margin-top: 10px;
}
.transferencia-locais label {
font-size: 0.85rem;
color: #ddd;
}
.transferencia-locais .origem-group,
.transferencia-locais .destino-group {
display: flex;
flex-direction: column;
gap: 4px;
}
.destino-inline {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
}
.destino-inline .icon-btn {
width: 28px;
height: 24px;
}
.destino-inline .icon-btn[disabled] {
opacity: 0.4;
cursor: not-allowed;
}
.destino-inline .icon-btn i {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size: 12px;
}
.transfer-select {
background: #1a1a1a;
border: 1px solid #333;
color: #eee;
padding: 4px 8px;
border-radius: 4px;
min-width: 200px;
cursor: pointer;
}
.transfer-select:focus {
outline: 1px solid #3fa7ff;
}
.transferencia-table th.sel-col {
width: 32px;
}
.transferencia-table td.sel input[type="checkbox"] {
transform: scale(0.85);
cursor: pointer;
accent-color: #3fa7ff;
}
.transferencia-table td.qtd-cell {
text-align: center;
}
.transferencia-table td.qtd-cell input.transfer-qtd {
width: 70px;
padding: 2px 4px;
background: #121212;
border: 1px solid #333;
color: #eee;
border-radius: 4px;
text-align: right;
appearance: textfield;
-moz-appearance: textfield;
}
.transferencia-table td.qtd-cell input.transfer-qtd:focus {
outline: 1px solid #3fa7ff;
}
.transferencia-table td.qtd-cell input.transfer-qtd::-webkit-outer-spin-button,
.transferencia-table td.qtd-cell input.transfer-qtd::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.transferencia-table td:nth-child(2),
.transferencia-table th:nth-child(2) {
width: 160px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.transferencia-table td:nth-child(3),
.transferencia-table th:nth-child(3) {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.transferencia-table th.desc-col,
.transferencia-table td.desc-cell {
width: 25ch;
max-width: 25ch;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.transferencia-table td.sel {
text-align: center;
}
/* --- Painel In�cio --- */
.inicio-grid{
/* layout anterior em flex podia for�ar largura em alguns cen�rios */
/* usamos grid responsivo que quebra automaticamente */
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
padding: 20px 0;
}
.inicio-btn{
min-width:220px;
flex:1 1 220px;
padding:18px 24px;
border-radius:10px;
font-size:16px;
background:var(--theme-bg-color);
color:var(--theme-color);
border:1px solid var(--border-color);
cursor:pointer;
transition:.25s;
}
.inicio-btn:hover{background:var(--hover-menu-bg);}
/* mant�m o comportamento original */
.header .header-menu > .menu-link:hover {
cursor: pointer; /* ?? for�a a m�ozinha */
}
.iniciar-prod-btn{ margin-bottom:1rem; }
/* --- Carrossel Semanal (P�gina In�cio) --- */
#paginaInicio .content-wrapper {
/* garante que o conte�do role internamente sem �estourar� o app */
overflow: auto;
}
.semana-carousel-container {
position: relative;
overflow: hidden; /* importante: limita a faixa vis�vel */
width: 100%;
}
.semana-carousel {
display: flex;
gap: 12px;
will-change: transform;
}
.semana-day-card {
flex: 0 0 162px; /* largura usada nos c�lculos do JS */
background: var(--content-bg);
border: 1px solid var(--border-color);
border-radius: 10px;
padding: 10px;
color: var(--theme-color);
}
.semana-day-card.center {
outline: 1px solid #3a6df0;
outline-offset: 0;
}
.semana-day-card.hoje {
box-shadow: 0 0 0 2px rgba(58,109,240,0.25) inset;
}
.semana-day-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.semana-day-date {
font-weight: 700;
}
.semana-day-dow {
font-size: 12px;
color: var(--inactive-color);
}
.semana-day-badge {
background: rgba(58,109,240,0.15);
color: #9db6ff;
border: 1px solid rgba(58,109,240,0.3);
border-radius: 999px;
padding: 2px 8px;
font-size: 12px;
}
.semana-produtos {
display: flex;
flex-direction: column;
gap: 6px;
max-height: 220px; /* evita crescer indefinidamente */
overflow: hidden; /* mant�m tudo dentro do card */
}
.semana-produto-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
min-height: 22px;
}
.semana-empty {
color: var(--inactive-color);
font-size: 12px;
}
/* Layout do Calend�rio: grade estreita � esq + painel lateral � dir */
.agenda-cal-layout {
display: flex;
gap: 16px;
align-items: flex-start;
}
.agenda-cal-main {
flex: 1 1 0;
min-width: 0;
}
.agenda-cal-sidebar {
width: 168px;
flex-shrink: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
/* Navegador de m�s no painel lateral */
.agenda-sidebar-nav {
display: none !important;
}
/* Legenda de �cones */
.agenda-sidebar-legenda {
position: relative;
padding: 0;
background: transparent;
border: 0;
display: flex;
flex-direction: column;
gap: 0;
}
.agenda-legenda-toggle {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 7px 10px;
border: 1px solid var(--border-color);
border-radius: 8px;
background: var(--content-bg);
color: inherit;
cursor: pointer;
}
.agenda-legenda-toggle i {
font-size: 11px;
color: var(--inactive-color);
transition: transform .15s;
}
.agenda-sidebar-legenda:not(.is-collapsed) .agenda-legenda-toggle i {
transform: rotate(180deg);
}
.agenda-sidebar-legenda.is-collapsed .agenda-legenda-itens {
display: none;
}
.agenda-legenda-itens {
display: flex;
flex-direction: column;
gap: 8px;
}
.agenda-sidebar-legenda:not(.is-collapsed) .agenda-legenda-itens {
position: absolute;
top: calc(100% + 6px);
right: 0;
z-index: 30;
min-width: 210px;
padding: 10px 12px;
background: var(--content-bg);
border: 1px solid var(--border-color);
border-radius: 10px;
box-shadow: 0 10px 24px rgba(0, 0, 0, .28);
}
.agenda-legenda-titulo {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--inactive-color);
margin-bottom: 2px;
}
.agenda-legenda-item {
display: flex;
align-items: center;
gap: 7px;
font-size: 12px;
color: var(--theme-color);
}
.agenda-legenda-item i {
width: 14px;
text-align: center;
flex-shrink: 0;
font-size: 13px;
}
.agenda-cal-toolbar {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: center;
gap: 10px;
margin-bottom: 12px;
}
.agenda-cal-toolbar .content-section-title {
justify-self: start;
}
.agenda-cal-toolbar-actions {
justify-self: end;
display: flex;
align-items: center;
gap: 8px;
position: relative;
}
.agenda-mes-nav {
display: inline-flex;
align-items: center;
gap: 6px;
justify-self: center;
}
.agenda-mes-nav-title {
min-width: 148px;
text-align: center;
font-weight: 700;
font-size: 14px;
text-transform: capitalize;
color: var(--theme-color);
}
.agenda-mes-nav-btn {
width: 32px;
height: 32px;
border: 1px solid var(--border-color);
border-radius: 8px;
background: var(--content-bg);
color: var(--theme-color);
cursor: pointer;
}
.agenda-mes-nav-btn:hover {
border-color: #60a5fa;
color: #60a5fa;
}
.agenda-mes-expand-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 10px;
border: 1px solid var(--border-color);
border-radius: 8px;
background: var(--content-bg);
color: var(--theme-color);
font-size: 12px;
cursor: pointer;
}
.agenda-mes-expand-btn:hover {
border-color: #60a5fa;
}
.agenda-calendario-grid {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 8px;
}
.agenda-calendario-grid:not(.is-mobile-agenda) {
display: flex;
flex-direction: column;
gap: 8px;
}
.agenda-cal-week-heads,
.agenda-calendario-grid:not(.is-mobile-agenda) .agenda-cal-week {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 8px;
}
.agenda-calendario-grid.is-collapsed .agenda-cal-week[hidden],
.agenda-calendario-grid:not(.is-mobile-agenda) .agenda-cal-week[hidden] {
display: none !important;
}
.agenda-cal-head {
font-size: 12px;
color: var(--inactive-color);
text-align: center;
font-weight: 700;
padding: 6px 0;
}
.agenda-cal-day {
min-height: 108px;
border: 1px solid var(--border-color);
border-radius: 10px;
background: var(--content-bg);
color: var(--theme-color);
padding: 6px;
cursor: pointer;
transition: border-color .2s, transform .12s;
display: flex;
flex-direction: column;
align-items: stretch;
}
.agenda-cal-day:hover {
border-color: #3a6df0;
transform: translateY(-1px);
}
.agenda-cal-day.is-today {
border-color: #60a5fa;
box-shadow: 0 0 0 2px rgba(96,165,250,.9) inset, 0 0 0 1px rgba(147,197,253,.55);
background: linear-gradient(180deg, rgba(96,165,250,.09), rgba(96,165,250,.02));
}
.agenda-cal-day.is-out {
opacity: .45;
}
.agenda-cal-num {
font-weight: 700;
font-size: 14px;
flex-shrink: 0;
align-self: flex-start;
}
.agenda-cal-niver {
color: #facc15;
line-height: 1;
display: inline-flex;
margin-left: 4px;
vertical-align: middle;
}
.agenda-cal-niver i {
font-size: 11px;
}
.agenda-cal-meta {
margin-top: 8px;
font-size: 11px;
color: var(--inactive-color);
}
.agenda-cal-reservas {
margin-top: 4px;
display: flex;
flex-direction: column;
gap: 2px;
}
.agenda-cal-lembretes {
margin-top: 4px;
display: flex;
gap: 4px;
flex-wrap: wrap;
}
.agenda-processing-overlay {
position: absolute;
inset: 0;
border-radius: 12px;
background: rgba(9, 15, 35, 0.55);
backdrop-filter: blur(1px);
display: none;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 10px;
z-index: 40;
pointer-events: all;
}
.agenda-processing-spinner {
width: 36px;
height: 36px;
border: 0;
border-radius: 0;
background: none;
}
.agenda-processing-text {
font-size: 12px;
color: #e5e7eb;
font-weight: 600;
}
@keyframes agenda-spin {
to { transform: rotate(360deg); }
}
/* Lembrete � pequeno �cone legado (mantido para n�o quebrar outros usos) */
.agenda-cal-lembrete-item {
width: 18px;
height: 18px;
border-radius: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 10px;
background: rgba(251,191,36,.18);
border: 1px solid rgba(251,191,36,.45);
color: #fde68a;
}
.links-rapidos-icone-campo {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 12px 0;
font-size: 13px;
color: var(--content-title-color);
}
.links-rapidos-icone-campo small {
display: block;
margin-top: 2px;
font-size: 11px;
color: var(--inactive-color);
}
.links-rapidos-icone-campo input[type="file"] {
display: block;
max-width: 220px;
font-size: 12px;
color: var(--inactive-color);
}
.links-rapidos-icone-preview,
.links-rapidos-item-bolinha {
width: 40px;
height: 40px;
flex-shrink: 0;
border-radius: 50%;
overflow: hidden;
background: rgba(37, 99, 235, .18);
border: 1px solid rgba(37, 99, 235, .4);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.links-rapidos-icone-preview.is-vazio,
.links-rapidos-item-bolinha.is-vazio {
background-image: none;
}
.links-rapidos-item {
display: flex;
align-items: flex-start;
gap: 10px;
}
.links-rapidos-item-corpo {
min-width: 0;
flex: 1;
}
.links-rapidos-privado-check {
display: flex;
align-items: flex-start;
gap: 8px;
margin: 0 0 12px 0;
font-size: 13px;
color: var(--content-title-color);
cursor: pointer;
user-select: none;
}
.links-rapidos-privado-check input[type="checkbox"] {
width: 16px;
height: 16px;
margin: 2px 0 0 0;
flex-shrink: 0;
accent-color: #2563eb;
cursor: pointer;
}
.links-rapidos-privado-check small {
display: block;
margin-top: 2px;
font-size: 11px;
color: var(--inactive-color);
}
.links-rapidos-item {
display: flex;
align-items: flex-start;
gap: 10px;
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 8px 10px;
background: var(--theme-bg-color);
margin-bottom: 8px;
}
.links-rapidos-item.is-privado {
border-color: rgba(37, 99, 235, .45);
}
.links-rapidos-item-topo {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
}
.links-rapidos-badge-privado {
flex-shrink: 0;
font-size: 10px;
font-weight: 600;
letter-spacing: .02em;
color: #93c5fd;
background: rgba(37, 99, 235, .18);
border: 1px solid rgba(37, 99, 235, .4);
border-radius: 999px;
padding: 2px 7px;
line-height: 1.3;
}
.light-mode .links-rapidos-badge-privado {
color: #1d4ed8;
background: rgba(37, 99, 235, .1);
}
.links-rapidos-anchor {
display: block;
width: 100%;
padding: 0;
border: none;
background: transparent;
color: var(--content-title-color);
font: inherit;
font-weight: 600;
text-align: left;
text-decoration: none;
word-break: break-all;
cursor: pointer;
}
.links-rapidos-anchor:hover {
text-decoration: underline;
}
.links-rapidos-meta {
margin-top: 4px;
font-size: 11px;
color: var(--inactive-color);
}
.cofre-acessos-card {
max-width: 380px;
width: calc(100vw - 32px);
padding: 18px 18px 16px;
text-align: left;
}
.cofre-acessos-card h3 {
margin: 0 28px 6px 0;
color: var(--content-title-color);
font-size: 17px;
font-weight: 650;
}
.cofre-acessos-contexto {
margin: 0 0 8px;
font-size: 12px;
color: #93c5fd;
word-break: break-all;
line-height: 1.35;
}
.cofre-acessos-aviso {
margin: 0 0 12px;
font-size: 11px;
color: var(--inactive-color);
line-height: 1.4;
}
.cofre-acessos-campo-lbl {
display: flex;
flex-direction: column;
gap: 4px;
margin: 0 0 10px;
font-size: 12px;
color: var(--inactive-color);
}
.cofre-acessos-card input,
.cofre-acessos-card textarea {
width: 100%;
max-width: 100%;
box-sizing: border-box;
min-height: 0;
height: auto;
padding: 7px 10px;
font-size: 13px;
border: 1px solid var(--border-color);
border-radius: 8px;
background: var(--theme-bg-color);
color: var(--content-title-color);
}
.cofre-acessos-card textarea {
resize: vertical;
min-height: 52px;
}
.cofre-acessos-hint {
display: block;
margin-top: 3px;
font-size: 11px;
color: var(--inactive-color);
}
.cofre-acessos-senha-linha {
display: flex;
gap: 6px;
align-items: center;
}
.cofre-acessos-senha-linha input {
flex: 1;
min-width: 0;
}
.cofre-acessos-acoes {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 8px;
margin-top: 12px;
}
.cofre-acessos-btn-pri {
background: #2563eb !important;
color: #fff !important;
border: none !important;
padding: 8px 14px !important;
font-size: 13px !important;
}
.cofre-acessos-btn-sec {
padding: 8px 12px !important;
font-size: 12px !important;
}
.links-rapidos-qr-cofre {
min-width: 88px;
padding: 10px 14px;
background: rgba(37, 99, 235, .16);
color: #93c5fd !important;
border: 1px solid rgba(37, 99, 235, .45);
border-radius: 8px;
font-weight: 600;
}
.links-rapidos-qr-cofre:hover {
filter: brightness(1.08);
}
.links-rapidos-qr-card {
max-width: 360px;
text-align: center;
}
.links-rapidos-qr-body {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
}
.links-rapidos-qr-abrir {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 180px;
padding: 10px 18px;
background: #2563eb;
color: #fff !important;
border: none;
border-radius: 8px;
text-decoration: none !important;
font-weight: 600;
}
.links-rapidos-qr-abrir:hover {
filter: brightness(1.08);
}
.links-rapidos-qr-acoes {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
}
.links-rapidos-qr-editar {
min-width: 120px;
padding: 10px 18px;
background: transparent;
color: var(--content-title-color) !important;
border: 1px solid rgba(148, 163, 184, 0.45);
border-radius: 8px;
font-weight: 600;
}
.links-rapidos-qr-editar:hover {
filter: brightness(1.08);
border-color: #2563eb;
}
.links-rapidos-qr-editar-form {
width: 100%;
display: flex;
flex-direction: column;
gap: 10px;
text-align: left;
}
.links-rapidos-qr-editar-form label {
display: flex;
flex-direction: column;
gap: 4px;
font-size: 12px;
color: var(--inactive-color);
}
.links-rapidos-qr-editar-form input {
width: 100%;
box-sizing: border-box;
padding: 8px 10px;
border-radius: 8px;
border: 1px solid rgba(148, 163, 184, 0.35);
background: var(--content-bg, #1a1f2e);
color: var(--content-title-color);
}
.links-rapidos-qr-editar-acoes {
display: flex;
justify-content: flex-end;
gap: 8px;
}
.links-rapidos-qr-cancelar {
background: transparent;
color: var(--content-title-color) !important;
border: 1px solid rgba(148, 163, 184, 0.45);
}
.links-rapidos-qr-salvar {
background: #2563eb;
color: #fff !important;
border: none;
}
.links-rapidos-qr-img {
width: 220px;
height: 220px;
border-radius: 10px;
background: #fff;
padding: 10px;
box-sizing: border-box;
}
.links-rapidos-qr-hint {
font-size: 12px;
color: var(--inactive-color);
}
/* Chamado de suporte — modal operacional compacto e responsivo */
.chamado-modal-overlay {
padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
background: rgba(15, 23, 42, .66);
backdrop-filter: blur(4px);
}
.chamado-modal-card {
width: min(720px, 100%);
max-height: min(760px, calc(100dvh - 24px));
padding: 0;
overflow: hidden;
border: 1px solid #cbd5e1;
border-radius: 10px;
background: #f8fafc;
color: #172033;
box-shadow: 0 24px 70px rgba(15, 23, 42, .3);
}
.chamado-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 62px;
padding: 10px 14px;
background: #0f1d35;
border-bottom: 3px solid #14b8a6;
}
.chamado-modal-heading {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.chamado-modal-icon {
display: grid;
place-items: center;
width: 36px;
height: 36px;
flex: 0 0 36px;
border-radius: 8px;
background: rgba(45, 212, 191, .15);
color: #5eead4 !important;
}
.chamado-modal-heading h3 {
margin: 0;
color: #fff !important;
font-size: 17px;
line-height: 1.2;
}
.chamado-modal-heading p {
margin: 2px 0 0;
color: #a9b7cb;
font-size: 11px;
}
.chamado-modal-card .chamado-modal-close,
.chamado-modal-card .agenda-modal-close {
position: static;
top: auto;
right: auto;
flex: 0 0 auto;
color: #e2e8f0;
border-color: #40506a;
}
.chamado-modal-close:hover,
.chamado-modal-close:focus-visible {
background: #25334a;
color: #fff;
}
.chamado-modal-header-actions {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
margin-left: auto;
}
.chamado-modal-ia-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
flex: 0 0 36px;
padding: 0;
line-height: 1;
border: 1px solid #40506a;
border-radius: 10px;
background: #1e293b;
color: #a5b4fc;
cursor: pointer;
}
.chamado-modal-ia-btn i {
display: block;
line-height: 1;
font-size: 16px;
width: 1em;
text-align: center;
}
.chamado-modal-ia-btn:hover,
.chamado-modal-ia-btn:focus-visible {
background: #312e81;
color: #e0e7ff;
}
.chamado-modal-wa-btn {
color: #22c55e;
text-decoration: none;
}
.chamado-modal-wa-btn:hover,
.chamado-modal-wa-btn:focus-visible {
background: #14532d;
color: #86efac;
}
.chamado-tabs {
display: flex;
flex-wrap: wrap;
gap: 4px;
padding: 8px 14px 0;
background: #fff;
border-bottom: 1px solid #dbe3ec;
}
.chamado-tab-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
min-height: 36px;
padding: 7px 18px 7px 13px;
border: 0;
border-bottom: 3px solid transparent;
background: transparent;
color: #607089;
font-weight: 700;
cursor: pointer;
}
.chamado-tab-btn:hover { color: #0f766e; }
.chamado-tab-btn.chamado-tab-active {
color: #0f766e;
border-bottom-color: #14b8a6;
}
.chamado-tab-badge {
position: absolute;
top: 2px;
right: 2px;
min-width: 16px;
height: 16px;
padding: 0 4px;
border-radius: 9px;
background: #0f766e;
color: #fff;
font-size: 10px;
font-weight: 700;
line-height: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
pointer-events: none;
font-family: system-ui, -apple-system, sans-serif;
font-style: normal;
}
.chamado-tab-btn.chamado-tab-active .chamado-tab-badge {
background: #0d9488;
}
.chamado-modal-body {
max-height: calc(min(760px, 100dvh - 24px) - 110px);
padding: 14px;
overflow: auto;
overscroll-behavior: contain;
background: #f1f5f9;
}
.chamado-field {
display: block;
margin-bottom: 12px;
}
.chamado-field > span,
.chamado-prioridade legend,
.chamado-anexos strong {
display: block;
margin-bottom: 5px;
color: #334155 !important;
font-size: 12px;
font-weight: 800;
}
.chamado-field textarea {
width: 100%;
min-height: 98px;
resize: vertical;
padding: 10px 11px;
box-sizing: border-box;
border: 1px solid #b9c7d8;
border-radius: 7px;
background: #fff;
color: #172033;
font: inherit;
line-height: 1.45;
}
.chamado-field textarea:focus,
.chamado-colar-zona:focus-visible {
outline: 3px solid rgba(20, 184, 166, .18);
border-color: #0f9f91;
}
.chamado-field small {
display: block;
margin-top: 4px;
color: #64748b;
font-size: 10px;
}
.chamado-prioridade {
margin: 0 0 12px;
padding: 0;
border: 0;
}
.chamado-prioridade-opcoes {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 7px;
}
.chamado-prio-opt {
position: relative;
cursor: pointer;
}
.chamado-prio-opt input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.chamado-prio-opt span {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 36px;
padding: 6px 9px;
box-sizing: border-box;
border: 1px solid #cbd5e1;
border-radius: 7px;
background: #fff;
color: #475569 !important;
font-size: 12px;
font-weight: 700;
}
.chamado-prio-opt input:focus-visible + span { outline: 3px solid rgba(37, 99, 235, .18); }
.chamado-prio-urgente input:checked + span { border-color: #ef4444; background: #fff1f2; color: #b91c1c !important; }
.chamado-prio-normal input:checked + span { border-color: #2563eb; background: #eff6ff; color: #1d4ed8 !important; }
.chamado-prio-baixa input:checked + span { border-color: #64748b; background: #f8fafc; color: #334155 !important; }
.chamado-anexos {
padding: 11px;
border: 1px solid #d3deea;
border-radius: 8px;
background: #fff;
}
.chamado-anexos-cabecalho {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-bottom: 9px;
}
.chamado-anexos-cabecalho > div > span {
display: block;
color: #64748b !important;
font-size: 10px;
}
.chamado-anexos-contador {
flex: 0 0 auto;
padding: 3px 7px;
border-radius: 999px;
background: #e2e8f0;
color: #475569 !important;
font-size: 10px;
font-weight: 800;
}
.chamado-colar-zona {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 46px;
padding: 7px 10px;
box-sizing: border-box;
border: 1px dashed #86a5c5;
border-radius: 7px;
background: #f8fafc;
color: #52647b;
text-align: center;
font-size: 11px;
cursor: text;
}
.chamado-colar-zona.is-pasting {
border-color: #14b8a6;
background: #ecfdf5;
color: #0f766e;
}
.chamado-anexo-botoes {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 7px;
margin-top: 8px;
}
.chamado-anexo-botao {
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
min-height: 36px;
padding: 6px 10px;
box-sizing: border-box;
border: 1px solid #b9c7d8;
border-radius: 7px;
background: #f8fafc;
color: #27415f !important;
font-size: 11px;
font-weight: 750;
cursor: pointer;
}
.chamado-anexo-botao:hover { border-color: #0f9f91; background: #f0fdfa; }
.chamado-anexo-botao span { color: inherit !important; }
.chamado-anexo-botao input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.chamado-anexos-preview {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 7px;
margin-top: 8px;
}
.chamado-anexo-item {
display: grid;
grid-template-columns: 42px minmax(0, 1fr) 28px;
align-items: center;
gap: 8px;
min-width: 0;
padding: 5px;
border: 1px solid #d8e1eb;
border-radius: 7px;
background: #f8fafc;
}
.chamado-anexo-miniatura {
display: grid;
place-items: center;
width: 42px;
height: 36px;
overflow: hidden;
border-radius: 5px;
background: #e2e8f0;
color: #0f766e;
}
.chamado-anexo-miniatura img,
.chamado-anexo-miniatura video { width: 100%; height: 100%; object-fit: cover; }
.chamado-anexo-info { min-width: 0; }
.chamado-anexo-info strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; font-size: 10px; }
.chamado-anexo-info span { color: #64748b !important; font-size: 9px; }
.chamado-anexo-remover {
width: 28px;
height: 28px;
padding: 0;
border: 0;
border-radius: 6px;
background: transparent;
color: #94a3b8;
cursor: pointer;
}
.chamado-anexo-remover:hover { background: #fee2e2; color: #b91c1c; }
.chamado-form-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: 12px;
}
.chamado-form-footer > span { color: #64748b !important; font-size: 10px; }
.chamado-enviar-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
min-height: 38px;
padding: 8px 15px;
border: 0 !important;
border-radius: 7px;
background: #0f8b7d !important;
color: #fff !important;
font-weight: 800;
}
.chamado-enviar-btn:hover { background: #0f766e !important; }
.chamado-enviar-btn:disabled { opacity: .65; cursor: wait; }
.chamado-lista {
display: flex;
flex-direction: column;
gap: 9px;
color: #1e293b;
}
.chamado-lista-vazia {
font-size: 13px;
color: #64748b !important;
padding: 12px 0;
}
.chamado-card {
padding: 12px;
border-radius: 10px;
border: 1px solid #cbd5e1;
background: #ffffff;
color: #1e293b !important;
box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.chamado-card strong { color: #0f172a !important; }
.chamado-card-meta,
.chamado-card-autor,
.chamado-card-prazo,
.chamado-card-fechado {
color: #475569 !important;
}
.chamado-card-desc {
font-size: 13px;
white-space: pre-wrap;
line-height: 1.45;
margin-bottom: 8px;
color: #1e293b !important;
}
.chamado-card .chamado-prazo-input {
width: 100%;
padding: 8px;
border-radius: 8px;
border: 1px solid #cbd5e1;
background: #fff;
color: #0f172a !important;
box-sizing: border-box;
}
.chamado-card a { color: #0f766e !important; }
@media (max-width: 760px) {
.chamado-modal-overlay { padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)); }
.chamado-modal-card { max-height: calc(100dvh - 16px); }
.chamado-modal-body { max-height: calc(100dvh - 126px); padding: 11px; }
}
@media (max-width: 520px) {
.chamado-modal-overlay { padding: 0; align-items: stretch; }
.chamado-modal-card { width: 100%; max-height: 100dvh; min-height: 100dvh; margin: 0; border: 0; border-radius: 0; }
.chamado-modal-header { min-height: 54px; padding: max(8px, env(safe-area-inset-top)) 11px 8px; }
.chamado-modal-icon { width: 32px; height: 32px; flex-basis: 32px; }
.chamado-modal-ia-btn { width: 32px; height: 32px; }
.chamado-modal-heading h3 { font-size: 15px; }
.chamado-modal-heading p { display: none; }
.chamado-tabs { padding: 6px 9px 0; }
.chamado-tab-btn { flex: 1; padding-inline: 6px; font-size: 11px; }
.chamado-modal-body { max-height: calc(100dvh - 101px - env(safe-area-inset-top)); padding: 10px; }
.chamado-field textarea { min-height: 90px; }
.chamado-prioridade-opcoes { gap: 5px; }
.chamado-prio-opt span { padding-inline: 4px; font-size: 10px; }
.chamado-anexos-cabecalho { gap: 6px; }
.chamado-anexos-cabecalho > div > span { max-width: 240px; }
.chamado-anexos-preview { grid-template-columns: 1fr; }
.chamado-form-footer { align-items: stretch; flex-direction: column; }
.chamado-form-footer > span { text-align: center; }
.chamado-enviar-btn { width: 100%; min-height: 44px; }
}
/* Chip de reserva/lembrete � barra horizontal compacta */
.agenda-cal-reserva-item {
display: flex;
flex-direction: row;
align-items: center;
gap: 4px;
font-size: 9px;
line-height: 1;
border-radius: 4px;
padding: 3px 5px;
cursor: pointer;
overflow: hidden;
text-align: left;
min-width: 0;
width: 100%;
}
/* Bloco das duas horas (in�cio e fim) empilhadas */
.agenda-chip-horas {
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
width: 100%;
}
/* Linha de �cones extras (caf�, convocado) � sempre ocupa espa�o para manter hora posicionada */
.agenda-chip-icons {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 4px;
width: 100%;
min-height: 14px;
}
/* Audit�rio � roxo */
.agenda-cal-reserva-item.is-auditorio {
background: rgba(139,92,246,.22);
border: 1px solid rgba(139,92,246,.55);
color: #ddd6fe;
}
/* Sala de reuni�o � verde */
.agenda-cal-reserva-item.is-sala {
background: rgba(16,185,129,.18);
border: 1px solid rgba(16,185,129,.45);
color: #d1fae5;
}
/* Reuni�o online � azul */
.agenda-cal-reserva-item.is-online {
background: rgba(59,130,246,.18);
border: 1px solid rgba(59,130,246,.45);
color: #bfdbfe;
}
/* Visita � laranja */
.agenda-cal-reserva-item.is-visita {
background: rgba(251,146,60,.18);
border: 1px solid rgba(251,146,60,.45);
color: #fed7aa;
}
/* Evento � rosa */
.agenda-cal-reserva-item.is-evento {
background: rgba(244,114,182,.18);
border: 1px solid rgba(244,114,182,.45);
color: #fbcfe8;
}
/* Lembrete � amarelo, texto escuro */
.agenda-cal-reserva-item.is-lembrete {
background: rgba(251,191,36,.22);
border: 1px solid rgba(251,191,36,.55);
color: #1a1400;
}
/* Chip j� passou � s� �cone, opaco */
.agenda-cal-reserva-item.is-past-chip {
opacity: .38;
padding: 2px 3px;
justify-content: center;
width: auto;
flex-shrink: 0;
}
/* Chip passado N�O realizado � �cone vermelho de alerta */
.agenda-cal-reserva-item.is-past-chip.is-nao-realizada {
opacity: .85;
background: rgba(239, 68, 68, .15);
border: 1px solid rgba(239, 68, 68, .55);
color: #fca5a5;
}
.agenda-cal-reserva-item.is-cancelada {
opacity: .9;
background: rgba(148, 163, 184, .18);
border: 1px dashed rgba(148, 163, 184, .7);
color: #94a3b8;
text-decoration: line-through;
}
.agenda-cal-reserva-item.is-cancelada .agenda-chip-hora,
.agenda-cal-reserva-item.is-cancelada .agenda-mobile-reserva-hora,
.agenda-cal-reserva-item.is-cancelada .agenda-mobile-reserva-assunto {
text-decoration: line-through;
}
/* Linha de �cones de eventos passados � enfileirada no final da c�lula */
.agenda-cal-past-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 2px;
margin-top: 2px;
}
/* �cone do tipo de sala dentro do chip */
.agenda-chip-room-icon {
font-size: 10px;
flex-shrink: 0;
}
/* Hora no chip (hh:mm) */
.agenda-chip-hora {
font-size: 10px;
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
line-height: 1;
}
.agenda-chip-hora-mobile {
display: none;
}
.agenda-cal-reserva-item.is-mobile-min {
justify-content: space-between;
gap: 6px;
}
.agenda-cal-reserva-item.is-mobile-stack {
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
}
.agenda-cal-reserva-item.is-mobile-participant {
justify-content: center;
padding: 2px 4px;
min-height: 16px;
}
.agenda-cal-reserva-item.is-mobile-participant .agenda-chip-convocado-icon {
margin: 0;
}
.agenda-cal-reserva-item.is-mobile-min.is-past-chip {
width: 100%;
opacity: .75;
justify-content: space-between;
}
.agenda-cal-reserva-item.is-mobile-stack.is-past-chip {
width: 100%;
justify-content: center;
}
.agenda-cal-reserva-item.is-mobile-participant.is-past-chip {
width: 100%;
justify-content: center;
}
/* Texto curto do lembrete */
.agenda-chip-hora.lembrete-texto {
font-size: 8px;
font-weight: 600;
}
/* �cone de caf� dentro do chip */
.agenda-chip-cafe-icon {
color: #fbbf24;
font-size: 9px;
flex-shrink: 0;
margin-left: auto;
}
/* �cone de convocado dentro do chip */
.agenda-chip-convocado-icon {
color: #34d399;
font-size: 9px;
flex-shrink: 0;
}
/* Legado */
.agenda-convocado-icon {
margin-right: 4px;
color: #34d399;
}
.agenda-cafe-icon {
margin-right: 4px;
color: #fbbf24;
}
.agenda-cafe-check {
display: inline-flex !important;
align-items: center;
gap: 8px;
}
.agenda-cafe-check input[type="checkbox"] {
width: 16px;
height: 16px;
margin: 0;
}
#agendaLembreteTexto {
resize: vertical;
}
#agendaEtapaFormulario input[type="time"]::-webkit-calendar-picker-indicator {
filter: invert(1);
opacity: 1;
}
/* -- Custom dropdown tipo de reserva -- */
.agenda-tipo-picker {
position: relative;
}
.agenda-tipo-trigger {
width: 100%;
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
border: 1px solid var(--border-color);
border-radius: 8px;
background: var(--theme-bg-color);
color: var(--theme-color);
font-size: 14px;
cursor: pointer;
text-align: left;
}
.agenda-tipo-trigger:hover {
border-color: #3a6df0;
}
.agenda-tipo-dropdown {
display: none;
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
background: var(--sidebar-bg, #1e2538);
border: 1px solid var(--border-color);
border-radius: 8px;
overflow: hidden;
z-index: 13000;
box-shadow: 0 8px 24px rgba(0,0,0,.75);
opacity: 1;
}
.agenda-tipo-dropdown.is-open {
display: block;
}
.agenda-tipo-option {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 9px 12px;
border: none;
background: transparent;
color: var(--theme-color);
font-size: 13px;
cursor: pointer;
text-align: left;
}
.agenda-tipo-option:hover {
background: rgba(255,255,255,.07);
}
.agenda-tipo-option.is-selected {
background: rgba(58,109,240,.18);
}
.agenda-modal-overlay {
position: fixed;
inset: 0;
z-index: 12050;
background: rgba(0,0,0,.86);
display: none;
align-items: flex-start;
justify-content: center;
padding: 24px 16px;
overflow-y: auto;
}
.agenda-modal-card {
width: min(760px, 100%);
margin: auto;
overflow: visible;
background: #111827;
color: var(--theme-color, #e5e7eb);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 16px;
position: relative;
}
.agenda-modal-card h3,
.agenda-modal-card label,
.agenda-modal-card span {
color: var(--theme-color, #e5e7eb);
}
#agendaAtaTranscreverBtn.is-listening {
background: #b91c1c;
color: #fff;
border-color: #991b1b;
}
.agenda-modal-close {
position: absolute;
right: 10px;
top: 8px;
border: 1px solid var(--border-color);
border-radius: 8px;
background: transparent;
color: var(--theme-color);
width: 30px;
height: 30px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
font-size: 18px;
padding: 0;
}
.agenda-modal-card--v2 {
padding: 0 0 16px;
overflow: hidden;
border-radius: 18px;
box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
.agenda-modal-card--v2 .agenda-modal-hero {
background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 55%, #5b21b6 100%);
padding: 18px 48px 16px 18px;
margin: 0 0 16px;
}
.agenda-modal-card--v2 #agendaModalTituloWrap {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 6px 16px;
}
.agenda-modal-card--v2 #agendaModalTitulo,
.agenda-modal-card--v2 #agendaModalResponsavel {
margin: 0;
color: #fff !important;
font-size: 18px;
font-weight: 700;
line-height: 1.25;
}
.agenda-modal-card--v2 #agendaModalResponsavel {
opacity: .92;
font-weight: 600;
}
.agenda-modal-card--v2 .agenda-modal-close {
top: 12px;
right: 12px;
border-color: rgba(255,255,255,.35);
color: #fff;
background: rgba(255,255,255,.12);
z-index: 2;
}
.agenda-modal-card--v2 #agendaEtapaFormulario {
padding: 0 16px;
}
.agenda-modal-card--v2 .agenda-form-grid input:not([type="checkbox"]),
.agenda-modal-card--v2 .agenda-form-grid select,
.agenda-modal-card--v2 .agenda-tipo-trigger {
border-radius: 12px;
min-height: 40px;
}
.agenda-opcoes-linha {
grid-column: 1 / -1;
display: flex;
gap: 12px 18px;
align-items: center;
flex-wrap: wrap;
}
.agenda-participante-avisos {
display: inline-flex;
align-items: center;
gap: 4px;
margin-left: 4px;
}
.agenda-aviso-toggle {
border: 1px solid rgba(148,163,184,.4);
background: transparent;
color: #94a3b8;
width: 22px;
height: 22px;
border-radius: 999px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
cursor: pointer;
}
.agenda-aviso-toggle.is-on {
color: #fff;
border-color: transparent;
}
.agenda-aviso-toggle[data-agenda-aviso-canal="whatsapp"].is-on {
background: #16a34a;
}
.agenda-aviso-toggle[data-agenda-aviso-canal="email"].is-on {
background: #2563eb;
}
.agenda-aviso-toggle:disabled {
cursor: default;
opacity: .7;
}
.agenda-mobile-cal-header {
display: none;
align-items: center;
justify-content: space-between;
gap: 10px;
background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
color: #fff;
border-radius: 18px 18px 0 0;
padding: 14px 12px;
margin-bottom: 0;
}
.agenda-mobile-cal-title {
font-weight: 800;
font-size: 15px;
letter-spacing: .04em;
text-transform: uppercase;
text-align: center;
flex: 1;
}
.agenda-mobile-cal-nav {
width: 36px;
height: 36px;
border: 0;
border-radius: 999px;
background: rgba(255,255,255,.18);
color: #fff;
cursor: pointer;
}
.agenda-opcao-btn {
width: 100%;
display: flex;
align-items: center;
gap: 10px;
text-align: left;
padding: 12px 14px;
border-radius: 10px;
border: 1px solid var(--border-color);
background: var(--theme-bg-color);
color: var(--theme-color);
cursor: pointer;
font-size: 14px;
}
.agenda-opcao-btn-icon {
font-size: 18px;
width: 24px;
text-align: center;
flex-shrink: 0;
color: #93c5fd;
}
.agenda-opcao-btn:nth-child(1) .agenda-opcao-btn-icon { color: #a78bfa; }
.agenda-opcao-btn:nth-child(2) .agenda-opcao-btn-icon { color: #6ee7b7; }
.agenda-opcao-btn:nth-child(3) .agenda-opcao-btn-icon { color: #fde68a; }
.agenda-opcao-btn:hover {
border-color: #3a6df0;
}
.agenda-form-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.agenda-linha-horario {
grid-column: 1 / -1;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
align-items: end;
}
.agenda-form-grid label {
display: grid;
gap: 6px;
font-size: 13px;
}
.agenda-form-grid input:not([type="checkbox"]),
.agenda-form-grid select {
width: 100%;
border: 1px solid var(--border-color);
border-radius: 8px;
background: var(--theme-bg-color);
color: var(--theme-color, #e5e7eb);
padding: 8px 10px;
}
.agenda-form-grid input::placeholder,
.agenda-form-grid textarea::placeholder {
color: var(--inactive-color);
}
.agenda-weekdays-checks {
display: flex;
gap: 10px;
flex-wrap: wrap;
font-size: 13px;
}
.agenda-weekdays-checks label {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 8px;
border-radius: 8px;
border: 1px solid var(--border-color);
}
.agenda-weekdays-checks input[type="checkbox"] {
width: 14px;
height: 14px;
margin: 0;
}
#agendaParticipantesSelect {
cursor: pointer;
}
.agenda-participantes-selecionados {
min-height: 38px;
border: 1px dashed var(--border-color);
border-radius: 8px;
padding: 8px;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.agenda-participante-chip {
padding: 4px 6px 4px 8px;
border-radius: 999px;
font-size: 12px;
background: rgba(58,109,240,.18);
color: #9db6ff;
border: 1px solid rgba(58,109,240,.35);
display: inline-flex;
align-items: center;
gap: 6px;
}
.agenda-participante-remover {
border: none;
background: transparent;
color: #dbeafe;
cursor: pointer;
font-size: 12px;
line-height: 1;
padding: 0 2px;
}
/* --- Responsividade mobile do calend�rio --- */
@media (max-width: 640px), (max-width: 900px) and (max-height: 500px) {
/* Header mobile: remover �cone de impressora */
#print-icon {
display: none !important;
}
/* Lista de produtos (mobile): 1 card por linha e sem bot�o modo lista */
#listaProdutos #viewToggleBtn {
display: none !important;
}
#listaProdutos #refreshCacheBtn {
display: none !important;
}
#listaProdutos .content-section.lista-produtos-alta {
padding: 12px;
}
#listaProdutos .lp-tabs-nav {
overflow: visible;
flex-wrap: wrap;
gap: 6px;
padding-bottom: 8px;
align-items: stretch;
}
#listaProdutos .lp-tabs-nav::-webkit-scrollbar {
display: none;
}
#listaProdutos .lp-tab-btn {
flex: 1 1 calc(50% - 6px);
min-width: 0;
white-space: normal;
text-align: left;
padding: 8px 10px;
font-size: 12px;
line-height: 1.15;
}
#listaProdutos .lp-tab-btn[data-lp-tab="solicitacoesConteudo"] {
border: 1px solid rgba(245, 158, 11, 0.28);
border-radius: 12px;
background: rgba(245, 158, 11, 0.06);
}
#listaProdutos .lp-tab-btn[data-lp-tab="solicitacoesConteudo"].lp-tab-active {
box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.25) inset;
}
#listaProdutos .lp-tabs-nav #productSpinner {
flex: 0 0 100%;
margin-left: 0;
display: flex;
justify-content: flex-end;
}
#listaProdutos .filter-bar {
display: grid;
grid-template-columns: 1fr auto auto auto auto;
gap: 8px;
align-items: center;
}
#listaProdutos .filter-bar > div:first-child {
grid-column: 1 / -1;
max-width: 100%;
}
#listaProdutos .filter-bar input {
max-width: none;
width: 100%;
height: 42px;
font-size: 14px;
}
#listaProdutos .filter-icon {
width: 42px;
height: 42px;
padding: 0;
border-radius: 12px;
background: var(--content-bg);
border: 1px solid var(--border-color);
}
#listaProdutos #listaProdutosGrid {
grid-template-columns: 1fr !important;
gap: 8px !important;
max-height: calc(100vh - 174px) !important;
}
#listaProdutos #listaProdutosGrid > * {
width: 100% !important;
min-width: 0 !important;
border-radius: 10px !important;
overflow: hidden !important;
box-shadow: 0 1px 6px rgba(0,0,0,0.08) !important;
}
#listaProdutos #listaProdutosGrid > * > div:first-child {
height: 96px !important;
}
#listaProdutos #listaProdutosGrid > * > div:first-child img,
#listaProdutos #listaProdutosGrid > * > div:first-child > div {
max-height: 96px !important;
}
#listaProdutos #listaProdutosGrid > * > div:last-child {
padding: 8px !important;
}
#listaProdutos #listaProdutosGrid > * > div:last-child > div:nth-child(1) {
font-size: 11px !important;
margin-bottom: 2px !important;
}
#listaProdutos #listaProdutosGrid > * > div:last-child > div:nth-child(2) {
font-size: 12px !important;
line-height: 1.2 !important;
min-height: 2.4em !important;
}
#listaProdutos #listaProdutosGrid > * > div:last-child > div:nth-child(3) {
font-size: 11px !important;
margin-top: 4px !important;
}
#listaProdutos #listaProdutosGrid > * > div:last-child > div:nth-child(4) {
margin-top: 6px !important;
}
#listaProdutos #listaProdutosGrid > * > div:last-child button {
min-height: 34px !important;
padding: 7px 10px !important;
font-size: 12px !important;
border-radius: 8px !important;
}
#listaProdutos .product-details {
max-height: calc(100vh - 250px);
padding-right: 0;
}
#listaProdutos .product-details li {
display: grid;
grid-template-columns: minmax(72px, auto) 1fr auto;
gap: 6px 10px;
align-items: start;
padding: 10px 10px 12px;
white-space: normal;
}
#listaProdutos .product-details .products {
width: auto;
flex: none;
font-size: 13px;
font-weight: 700;
line-height: 1.15;
}
#listaProdutos .product-details .status {
display: block !important;
margin-left: 0;
width: auto;
font-size: 12px;
line-height: 1.25;
white-space: normal;
overflow: hidden;
text-overflow: ellipsis;
max-height: 2.8em;
}
#listaProdutos .product-details .status.expanded {
max-height: none;
}
#listaProdutos .product-details .unidade {
justify-self: end;
align-self: start;
font-size: 12px;
font-weight: 700;
white-space: nowrap;
}
/* Modal Solicita��o de compra: campos em coluna �nica no mobile */
#modalCatalogoOmie #modalCatalogoOmieContent {
width: 100vw !important;
max-height: 100dvh !important;
}
#modalCatalogoOmie .modal-body {
padding: 12px !important;
}
#modalCatalogoOmie #catalogoGridConfiguracoes {
grid-template-columns: 1fr !important;
gap: 10px !important;
padding: 0 !important;
}
#modalCatalogoOmie #catalogoFiltrosContainer {
grid-template-columns: 1fr !important;
}
#modalCatalogoOmie #listaProdutosCatalogo {
grid-template-columns: 1fr !important;
gap: 10px !important;
max-height: 52vh !important;
}
/* Modal Meu Carrinho (mobile): controles abaixo do item em coluna */
#modalCarrinhoCompras .modal-container {
width: 98% !important;
}
#modalCarrinhoCompras .modal-body {
padding: 12px !important;
}
#modalCarrinhoCompras .carrinho-item-top-row {
flex-direction: column;
gap: 10px !important;
}
#modalCarrinhoCompras .carrinho-item-controles {
width: 100%;
display: flex;
flex-direction: row;
align-items: flex-end !important;
gap: 8px !important;
}
#modalCarrinhoCompras .carrinho-item-qtd {
width: 92px !important;
flex: 0 0 92px;
}
#modalCarrinhoCompras .carrinho-item-botoes {
flex: 1;
display: flex;
flex-direction: row;
align-items: flex-end;
gap: 8px;
}
#modalCarrinhoCompras .carrinho-item-acao-remover,
#modalCarrinhoCompras .carrinho-item-acao-confirmar {
width: 34px !important;
height: 34px !important;
border-radius: 8px !important;
}
#modalCarrinhoCompras .carrinho-item-confirmar-wrap {
display: flex;
flex-direction: row;
align-items: center;
gap: 6px;
}
#modalCarrinhoCompras .carrinho-item-alerta {
flex: 0 0 auto;
}
#modalCarrinhoFooterAcoes {
justify-content: stretch !important;
}
#modalCarrinhoFooterBotoes {
width: 100%;
display: flex;
flex-direction: column;
gap: 10px;
}
#modalCarrinhoFooterBotoes .content-button {
width: 100%;
justify-content: center;
}
/* Qualidade f�brica (mobile): bot�es em linha e formul�rio em coluna �nica */
#qualidadeFabricaPane #qualidadeAcoesRapidas {
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: 8px;
width: 100%;
}
#qualidadeFabricaPane #qualidadeAcoesRapidas .content-button {
width: 100%;
min-width: 0;
justify-content: center;
padding-left: 8px;
padding-right: 8px;
}
#qualidadeFabricaPane #qualidadeCriarBtn,
#qualidadeFabricaPane #qualidadeRelatorioBtn,
#qualidadeFabricaPane #qualidadeRelatorioTabelaBtn,
#qualidadeFabricaPane #qualidadeListaPirCodigosBtn {
display: none !important;
}
#qualidadeFabricaPane .qualidade-inspecao-top {
grid-template-columns: 1fr !important;
gap: 10px !important;
}
#qualidadeFabricaPane .qualidade-inspecao-campos {
grid-template-columns: 1fr !important;
gap: 10px !important;
}
#qualidadeFabricaPane #qualidadeImagemProdutoPlaceholder {
min-height: 130px !important;
}
#qualidadeFabricaPane #qualidadeInspecaoAcoes {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 8px;
}
#qualidadeFabricaPane #qualidadeInspecaoAcoes .content-button {
width: 100%;
justify-content: center;
}
/* PIR mobile: página e modal usáveis no celular */
#qualidadeFabricaPane .content-wrapper,
#qualidadeFabricaPane .content-section {
padding-left: 8px !important;
padding-right: 8px !important;
}
#qualidadeFabricaPane .title-wrapper {
flex-direction: column;
align-items: flex-start !important;
gap: 8px !important;
}
#qualidadeFabricaPane #qualidadePirPendentesCount {
align-self: flex-start;
}
#qualidadeFabricaPane #qualidadeAcoesRapidas {
grid-template-columns: 1fr 1fr !important;
}
#qualidadeFabricaPane #qualidadePirRefreshBtn {
margin-left: 0 !important;
}
#qualidadeFabricaPane #qualidadePirPendentesWrap > div {
padding: 10px !important;
}
#qualidadeFabricaPane #qualidadePirPendentesBusca {
max-width: none !important;
width: 100% !important;
min-width: 0 !important;
font-size: 16px; /* evita zoom iOS */
}
#qualidadeFabricaPane #qualidadePirPendentesWrap table {
min-width: 560px !important;
font-size: 12px !important;
}
#qualidadeFabricaPane #qualidadePirPendentesWrap th,
#qualidadeFabricaPane #qualidadePirPendentesWrap td {
padding: 8px 8px !important;
}
#qualidadeInspecaoModal {
align-items: stretch !important;
padding: 0 !important;
}
#qualidadeInspecaoModal .modal-container {
width: 100% !important;
max-width: 100% !important;
max-height: 100vh !important;
height: 100vh !important;
margin: 0 !important;
border-radius: 0 !important;
}
#qualidadeInspecaoModal #qualidadeInspecaoForm {
padding: 12px !important;
}
#qualidadeInspecaoModal .qualidade-inspecao-acoes-produto {
flex-direction: column !important;
}
#qualidadeInspecaoModal #qualidadeAbrirDadosProdutoBtn,
#qualidadeInspecaoModal label[for="qualidadeProdutoCustomizadoCheck"] {
width: 100%;
justify-content: center;
min-height: 44px;
}
#qualidadeInspecaoModal input,
#qualidadeInspecaoModal select,
#qualidadeInspecaoModal textarea {
font-size: 16px !important; /* evita zoom iOS */
min-height: 42px;
}
#qualidadeInspecaoModal #qualidadeProdutoSugestoes,
#qualidadeInspecaoModal #qualidadeNfeLista {
height: auto !important;
max-height: 40vh !important;
}
#qualidadeAlteracoesModal .modal-container {
width: 100% !important;
max-width: 100% !important;
max-height: 100vh !important;
margin: 0 !important;
border-radius: 0 !important;
}
#qualidadeAlteracoesModal table {
min-width: 520px !important;
font-size: 12px !important;
}
#qualidadeRelatorioTabelaContainer {
max-height: 56vh !important;
}
#qualidadeRelatorioTabela {
min-width: 720px !important;
font-size: 12px;
}
#qualidadeCarretelImagemPlaceholder .qualidade-pir-frequencia-badge {
top: 8px;
left: 8px;
font-size: 10px;
padding: 4px 8px;
}
#qualidadeCarretelImagemPlaceholder .qualidade-pir-galeria {
grid-template-columns: 1fr;
gap: 10px;
}
#qualidadeCarretelImagemPlaceholder .qualidade-pir-img,
#qualidadeCarretelImagemPlaceholder .qualidade-pir-img-wrap {
min-height: 170px;
max-height: 280px;
}
#qualidadeCarretelImagemPlaceholder .qualidade-pir-oque-box {
padding: 9px 10px;
}
/* No mobile, manter apenas o menu superior de �cones */
#appHeader {
display: flex !important;
justify-content: flex-end;
padding: 0 10px;
}
.menu-logo,
#mainMenu,
.user-badge {
display: none !important;
}
#home-icon {
display: inline-flex !important;
}
.header-profile {
margin-left: 0;
padding-left: 0;
flex: 0 1 auto;
gap: 14px;
}
/* Reativar �cone hamburger lateral no mobile */
.left-side {
display: flex !important;
position: fixed;
left: 8px;
top: 66px;
width: auto;
height: auto !important;
padding: 0;
border-right: none;
background: transparent;
z-index: 1200;
}
.sidebar-hamburger {
width: 38px;
height: 38px;
font-size: 17px;
}
.sidebar-content {
left: 46px;
top: 0;
bottom: auto;
max-height: 72vh;
}
/* Remove espa�o lateral excessivo no mobile (principalmente � direita) */
#paginaInicio .content-wrapper {
padding-left: 8px;
padding-right: 8px;
/* Mantém folga superior para o hamburger fixo não cobrir "Operação móvel" */
padding-top: 56px;
}
/* Layout: sidebar vai para baixo do calend�rio */
.agenda-cal-layout {
flex-direction: column;
width: 100%;
max-width: 100%;
overflow-x: hidden;
}
.agenda-cal-main,
.agenda-calendario-grid {
width: 100%;
max-width: 100%;
}
/* No mobile, esconder campos laterais para simplificar a visualiza��o */
#agendaFiltroUsuario,
.agenda-sidebar-nav,
.agenda-sidebar-legenda {
display: none !important;
}
/* Sidebar ocupa largura total e organiza itens em linha */
.agenda-cal-sidebar {
width: 100%;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
gap: 8px;
padding: 0;
}
/* Grid do calend�rio: gap m�nimo para aproveitar espa�o */
.agenda-calendario-grid {
gap: 2px;
}
/* Cabe�alho dos dias da semana menor */
.agenda-cal-head {
font-size: 9px;
padding: 2px 0;
}
/* C�lulas do calend�rio: mais altas para caber os chips */
.agenda-cal-day {
min-height: 80px;
padding: 2px;
}
/* N�mero do dia menor */
.agenda-cal-num {
font-size: 10px;
margin-bottom: 2px;
}
/* Chips: barra horizontal compacta no mobile */
.agenda-cal-reservas {
gap: 2px;
}
.agenda-cal-reserva-item {
padding: 2px 4px;
}
.agenda-chip-hora {
font-size: 9px;
}
.agenda-chip-hora-desktop {
display: none;
}
.agenda-chip-hora-mobile {
display: inline;
}
.agenda-chip-room-icon,
.agenda-chip-cafe-icon {
display: none;
}
.agenda-chip-room-icon {
font-size: 9px;
}
.agenda-chip-cafe-icon,
.agenda-chip-convocado-icon {
font-size: 8px;
}
.agenda-chip-icons {
gap: 2px;
}
/* Modal ocupa quase a tela toda */
.agenda-modal-card {
width: 97vw;
max-height: 92vh;
padding: 12px;
border-radius: 10px;
}
.agenda-modal-card--v2 {
padding: 0 0 14px;
border-radius: 18px;
}
.agenda-modal-overlay {
padding: 10px 8px;
align-items: flex-end;
}
/* Formulário de criação: colunas viram uma */
.agenda-form-grid {
grid-template-columns: 1fr;
}
.agenda-linha-horario {
grid-template-columns: 1fr 1fr;
}
}
/* status icons cores */
.status-excluido { color: #ef4444; }
.status-produzindo { color: #f59e0b; }
.status-produzido { color: #10b981; }
.status-aguardando, .status-novo { color: #93c5fd; }
/* For�a 8 colunas s� para a lista do PCP */
/* j� est� usando grid de 8 colunas; garantimos e alinham-se as c�lulas */
#listaPecasPCPList.grid-pecas li {
display: grid;
/* cod desc unid qtd perda qtdb qpro qalm acao */
grid-template-columns: 140px 1fr 80px 80px 110px 90px 90px 110px !important;
gap: 8px;
align-items: center;
}
#listaPecasPCPList .unid,
#listaPecasPCPList .qtd,
#listaPecasPCPList .perda,
#listaPecasPCPList .qtdb,
#listaPecasPCPList .qtdpro,
#listaPecasPCPList .qtdalm { text-align: center; }
/* desc: elipse no grid; tooltip mostra o texto completo */
#listaPecasPCPList .desc {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* tooltip flutuante */
.pcp-tip {
position: fixed;
z-index: 9999;
max-width: 60ch;
pointer-events: none;
background: rgba(18,18,20,0.98);
color: #fff;
padding: 8px 10px;
border-radius: 8px;
box-shadow: 0 6px 18px rgba(0,0,0,.35);
font-size: 12.5px;
line-height: 1.35;
transform: translate(-50%, calc(-100% - 10px));
opacity: 0;
transition: opacity .08s ease-out;
}
.pcp-tip.show { opacity: 1; }
/* ��� Login sempre no topo ��� */
.overlay-app {
position: fixed;
inset: 0; /* top/right/bottom/left:0 */
z-index: 12000 !important;/* acima de qualquer modal/tabela/tooltip */
pointer-events: all;
}
.overlay-app.is-active { /* j� existia, refor�o para intera��o */
visibility: visible;
opacity: 1;
pointer-events: all;
}
/* o conte�do do popup tamb�m ganha uma camada pr�pria */
.overlay-app .auth-popup {
position: relative;
z-index: 12001; /* acima do backdrop */
}
/* ==== Colaboradores (escopo local) ==== */
.colab-pane .colab-list {
list-style: none;
margin: 12px 0 0;
padding: 0;
border-radius: 12px;
overflow: hidden;
}
.colab-pane .row {
display: grid;
grid-template-columns: 80px 1fr 1fr 140px; /* ID | Usu�rio | Pap�is | A��es */
gap: 12px;
align-items: center;
padding: 12px 16px;
border-bottom: 1px solid #2a2e39;
}
.colab-pane .row.header-row {
font-weight: 600;
color: #cfd3dc;
background: #1f2430;
}
.colab-pane .row:last-child { border-bottom: none; }
.colab-pane .col.acoes { justify-self: end; }
.colab-pane .loading, .colab-pane .error { padding: 16px; }
/* Adicione ao seu CSS */
.spinner {
vertical-align: middle;
margin-left: 8px;
}
.user-badge .is-ghost {
opacity: 0.6;
font-style: italic;
}
/* Grupo guardado por login: estilo b�sico pra quando est� desabilitado */
.auth-group .auth-disabled {
opacity: 0.55;
cursor: not-allowed;
pointer-events: auto; /* mantemos para capturar o clique e mostrar dica */
filter: grayscale(0.2);
}
/* micro feedback ao tentar clicar deslogado */
.auth-group .auth-bump {
transform: translateY(-1px);
}
/* se quiser ainda mais claro, quando hover */
.auth-group .auth-disabled:hover {
transform: none;
}
/* PCP � compactar filtros */
#codeFilterPCP,
#descFilterPCP {
flex: none !important;
height: 24px !important;
padding: 2px 6px !important;
font-size: 12px !important;
border: 1px solid var(--border-color) !important;
border-radius: 4px !important;
}
/* PCP: destaque quando Qtd > Arm Pro */
.pcp-warn {
color: #d32f2f; /* vermelho material-ish */
font-weight: 700; /* deixa mais evidente */
}
.pcp-warn input {
color: #d32f2f;
font-weight: 700;
}
/* larguras espec�ficas */
#codeFilterPCP { width: 120px !important; }
#descFilterPCP { width: 200px !important; }
/* Bot�es �cone na coluna A��o */
/* Bot�es �cone na coluna A��o */
.icon-btn, .produce-btn {
position: relative; /* para centralizar o SVG */
display: inline-block;
width: 28px;
height: 24px;
padding: 0 !important;
line-height: 0;
text-align: center;
border-radius: 9999px;
border: 1px solid var(--border-color);
background: #1f2937;
cursor: pointer;
transition: transform .08s ease, background .15s ease;
}
.icon-btn:hover, .produce-btn:hover { transform: translateY(-1px); background:#111827; }
.icon-btn:active, .produce-btn:active { transform: translateY(0); }
.icon-btn svg, .produce-btn svg {
position: absolute; /* centrado matem�tico */
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 16px;
height: 16px;
display: block;
margin: 0 !important; /* mata qualquer margem herdada */
}
.produce-btn { border-color:#2563eb; }
.produce-btn svg { fill:#facc15; } /* amarelo produ��o */
/* feedback opcional quando aciona produzir */
.blink-success { animation: blinkSuccess .6s ease 2; }
@keyframes blinkSuccess {
0%,100% { background: transparent; }
50% { background: rgba(34,197,94,0.15); }
}
/* Coluna A��o: centralizar os bot�es-�cone */
.data-row .acao {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
min-width: 84px;
}
.icon-btn, .produce-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 24px;
padding: 0 !important;
line-height: 0;
text-align: center;
border-radius: 9999px;
border: 1px solid var(--border-color);
background: #1f2937;
cursor: pointer;
transition: transform .08s ease, background .15s ease;
}
.icon-btn svg, .produce-btn svg { display:block; margin:0; }
.produce-btn { border-color:#2563eb; }
.produce-btn svg { fill:#facc15; } /* amarelo produ��o */
/* Bot�o-�cone inline, usado em t�tulos de se��o (ex.: Estrutura de produto) */
.icon-inline-btn{
display:inline-flex; align-items:center; justify-content:center;
width:32px; height:32px;
border:1px solid #ddd; border-radius:8px;
background:#f8f9fa; cursor:pointer;
transition:background .15s,border-color .15s,transform .04s;
}
.icon-inline-btn:hover{ background:#eef2ff; border-color:#c7d2fe; }
.icon-inline-btn:active{ transform:translateY(1px); }
.icon-inline-btn svg{ display:block; }
/* Bot�o-�cone ao lado do t�tulo "Estrutura de produto" */
.icon-inline-btn{
background: transparent; /* nada de quadrado branco */
border: none;
padding: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 6px;
color: var(--theme-color); /* �cone acompanha o tema */
line-height: 1;
cursor: pointer;
transition: background .2s, opacity .2s;
}
.icon-inline-btn:hover { background: var(--hover-menu-bg); }
.icon-inline-btn:focus { outline: 2px solid var(--border-color); outline-offset: 2px; }
/* garante que o svg use a cor do texto */
.icon-inline-btn svg{
width: 18px; height: 18px;
display: block;
stroke: currentColor;
fill: none;
}
/* contraste em modo claro */
.light-mode .icon-inline-btn { color: #333; }
/* Ajuste para conter a descri��o */
.desc {
overflow: hidden; /* esconde o que ultrapassar */
text-overflow: ellipsis; /* mostra retic�ncias */
white-space: nowrap; /* impede quebra de linha */
min-width: 0; /* permite que o texto seja truncado */
max-width: 100%; /* n�o ultrapassa a largura da coluna */
padding-right: 10px; /* mant�m espa�o da pr�xima coluna */
}
/* � A��es (trocar, expandir, abrir) � */
#estruturaProduto #malha .acoes{
display:flex; justify-content:center; align-items:center; gap:8px;
}
#estruturaProduto #malha .icon-btn{
width:28px; height:28px;
display:inline-flex; align-items:center; justify-content:center;
border-radius:8px; border:1px solid rgba(255,255,255,.08);
background: rgba(255,255,255,.06);
cursor:pointer;
transition: transform .08s ease, background .12s ease, border-color .12s ease;
color: #fff; /* <- �cone branco */
background: rgba(255,255,255,.06); /* mant�m o fundo atual */
border: 1px solid rgba(255,255,255,.10); /* borda sutil */
}
/* For�a os SVGs das a��es a usarem a cor do bot�o (branco) */
#estruturaProduto #malha .icon-btn svg,
#estruturaProduto #malha .icon-btn svg *{
stroke: currentColor !important;
fill: none !important;
}
#estruturaProduto #malha .icon-btn:hover{
background: rgba(255,255,255,.10);
border-color: rgba(255,255,255,.16);
transform: translateY(-1px);
}
#estruturaProduto #malha .icon-btn:active{
transform: translateY(0);
}
#estruturaProduto #malha .icon-btn .i{
width:18px; height:18px; display:block;
}
/* mant�m alinhamento das colunas num�ricas */
#estruturaProduto #malha .qtd,
#estruturaProduto #malha .unidade,
#estruturaProduto #malha .custo-real{ text-align:center; }
/* ===== Sub-estrutura (linha expandida) ===== */
#estruturaProduto #malha li.sub-estrutura-row{ padding: 0; }
#estruturaProduto #malha li.sub-estrutura-row > .sub-estrutura{
grid-column: 1 / -1; /* ocupa todas as colunas da linha principal */
margin: 8px 0 10px;
padding: 8px 10px 12px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
border-radius: 10px;
}
#estruturaProduto #malha li.sub-estrutura-row .sub-title{
font-weight: 600; margin: 0 0 6px; opacity: .9;
}
/* grade da lista interna (mesmo layout da principal) */
#estruturaProduto #malha li.sub-estrutura-row ul.malha-sub{
list-style: none; margin: 0; padding: 0;
}
#estruturaProduto #malha li.sub-estrutura-row ul.malha-sub li{
display: grid;
grid-template-columns: 120px minmax(0,1fr) 60px 70px 90px 120px;
column-gap: 1rem;
align-items: center;
padding: 6px 12px;
}
#estruturaProduto #malha li.sub-estrutura-row ul.malha-sub li > div:nth-child(2){
min-width: 0; /* permite ellipsis na 2� coluna */
}
#estruturaProduto #malha li.sub-estrutura-row .desc{
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; padding-right: 10px;
}
#estruturaProduto #malha li.sub-estrutura-row .acoes{
display: flex; gap: 8px; justify-content: flex-end; align-items: center;
}
/* herda �cones brancos do bot�o principal */
#estruturaProduto #malha .icon-btn svg,
#estruturaProduto #malha .icon-btn svg *{
stroke: currentColor; fill: none;
}
/* ===== Sub-estrutura (sem cabe�alho, mesma grade, cor diferente) ===== */
#estruturaProduto #malha li.sub-estrutura-row{ padding: 0; }
#estruturaProduto #malha li.sub-estrutura-row > .sub-estrutura{
grid-column: 1 / -1;
margin: 8px 0 10px;
padding: 6px 8px 10px;
background: rgba(255,255,255,.035); /* cor diferente */
border: 1px solid rgba(255,255,255,.08);
border-radius: 10px;
}
#estruturaProduto #malha li.sub-estrutura-row ul.malha-sub{
list-style: none; margin: 0; padding: 0;
}
#estruturaProduto #malha li.sub-estrutura-row ul.malha-sub li{
display: grid;
grid-template-columns: 120px minmax(0,1fr) 60px 70px 90px 120px; /* igual principal */
column-gap: 1rem;
align-items: center;
padding: 6px 12px;
background: rgba(255,255,255,.02); /* linhas com leve contraste */
border-radius: 8px;
}
#estruturaProduto #malha li.sub-estrutura-row ul.malha-sub li + li{
margin-top: 6px;
}
#estruturaProduto #malha li.sub-estrutura-row ul.malha-sub li > div:nth-child(2){
min-width: 0;
}
#estruturaProduto #malha li.sub-estrutura-row .desc{
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; padding-right: 10px;
}
#estruturaProduto #malha li.sub-estrutura-row .acoes{
display: flex; gap: 8px; justify-content: flex-end; align-items: center;
}
/* garante �cones brancos */
#estruturaProduto #malha .icon-btn svg,
#estruturaProduto #malha .icon-btn svg *{
stroke: currentColor;
fill: none;
}
/* � Linhas filhas: mesma grade, outra cor � */
/* === Sub-estrutura: cabe�alho do grupo (linha inteira) ================== */
/* Deixa muito claro que essas linhas pertencem ao item clicado */
#estruturaProduto #malha li.child-group-header{
display: grid;
grid-template-columns: 1fr; /* ocupa toda a linha */
padding: 6px 18px 2px;
margin-top: 8px;
}
#estruturaProduto #malha li.child-group-header .child-group-title{
display: flex; align-items: center; gap: 8px;
font-size: .92rem; font-weight: 600; letter-spacing: .2px;
color: #cfe3ff; /* t�tulo azulado */
text-transform: none;
}
#estruturaProduto #malha li.child-group-header .child-group-title .pip{
width: 10px; height: 10px; border-radius: 50%;
background: rgba(59,130,246,.9); /* bolinha azul */
box-shadow: 0 0 0 4px rgba(59,130,246,.18); /* aura */
}
/* === Sub-estrutura: bloco visual cont�nuo =============================== */
/* j� existe o .child-row; aqui intensificamos a borda �em bloco� e o recuo */
#estruturaProduto #malha li.child-row{
position: relative;
background: rgba(59,130,246,.08); /* azul claro */
/* barra de conex�o � esquerda para �nidar� visualmente */
border-left: 4px solid rgba(59,130,246,.45);
padding-left: 14px; /* compensa a barra */
box-shadow:
inset -2px 0 0 rgba(59,130,246,.30); /* lateral direita sutil */
}
#estruturaProduto #malha li.child-row.child-first{
border-top-left-radius: 10px; border-top-right-radius: 10px;
box-shadow:
inset -2px 0 0 rgba(59,130,246,.30),
inset 0 2px 0 rgba(59,130,246,.45);
}
#estruturaProduto #malha li.child-row.child-last{
border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;
margin-bottom: 10px;
box-shadow:
inset -2px 0 0 rgba(59,130,246,.30),
inset 0 -2px 0 rgba(59,130,246,.45);
}
/* espa�o suave entre as linhas internas sem quebrar a moldura */
#estruturaProduto #malha li.child-row + li.child-row{ margin-top: 4px; }
/* �cones dentro da sub-lista ligeiramente �desbotados� para n�o disputar com o t�tulo */
#estruturaProduto #malha li.child-row .icon-btn{ opacity: .9 }
#estruturaProduto #malha li.child-row .icon-btn:hover{ opacity: 1 }
/* (opcional) sublinha a descri��o s� dentro das child-row quando hover */
#estruturaProduto #malha li.child-row:hover .desc{
text-decoration: underline; text-decoration-color: rgba(59,130,246,.6);
}
#estruturaProduto #malha li.child-row{
background: rgba(59,130,246,.08); /* azul claro discreto */
border-radius: 0; /* o raio vem no primeiro/�ltimo */
/* laterais do bloco (cont�nuas) */
box-shadow:
inset 2px 0 0 rgba(59,130,246,.45), /* borda esquerda do grupo */
inset -2px 0 0 rgba(59,130,246,.45); /* borda direita do grupo */
}
/* primeira do grupo: ativa topo + cantos */
#estruturaProduto #malha li.child-row.child-first{
margin-top: 8px; /* �margem� superior do bloco */
border-top-left-radius: 10px;
border-top-right-radius: 10px;
box-shadow:
inset 2px 0 0 rgba(59,130,246,.45),
inset -2px 0 0 rgba(59,130,246,.45),
inset 0 2px 0 rgba(59,130,246,.45); /* linha do topo */
}
/* �ltima do grupo: ativa fundo + cantos */
#estruturaProduto #malha li.child-row.child-last{
margin-bottom: 10px; /* �margem� inferior do bloco */
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
box-shadow:
inset 2px 0 0 rgba(59,130,246,.45),
inset -2px 0 0 rgba(59,130,246,.45),
inset 0 -2px 0 rgba(59,130,246,.45); /* linha de base */
}
/* leve respiro entre as linhas internas, sem quebrar a moldura */
#estruturaProduto #malha li.child-row + li.child-row{
margin-top: 4px;
}
/* �cones sempre brancos */
#estruturaProduto #malha .icon-btn svg,
#estruturaProduto #malha .icon-btn svg *{
stroke: currentColor !important;
fill: none !important;
}
/* Estrutura: escondido por padr�o; o JS exibe quando houver filhos */
#estruturaProduto #malha .icon-btn[data-action="estrutura"]{
display: none;
}
/* ===== Editor de Troca (inline, 1 campo) ===== */
#estruturaProduto #malha li.swap-row{
display: grid;
grid-template-columns: 120px minmax(0,1fr) 60px 70px 90px 120px; /* igual � tabela */
column-gap: 1rem;
align-items: start;
padding: 8px 12px;
background: rgba(234,179,8,.08); /* �mbar sutil p/ �modo edi��o� */
border-radius: 10px;
box-shadow:
inset 2px 0 0 rgba(234,179,8,.35),
inset -2px 0 0 rgba(234,179,8,.35),
inset 0 2px 0 rgba(234,179,8,.35),
inset 0 -2px 0 rgba(234,179,8,.35);
margin: 6px 0 8px;
}
#estruturaProduto #malha .swap-label{ font-size:12px; opacity:.8; margin-bottom:4px; display:block; }
#estruturaProduto #malha .swap-input{
width:100%; height:32px;
border-radius:8px; border:1px solid rgba(255,255,255,.15);
background: rgba(255,255,255,.06); color:#fff; padding:6px 10px; outline:none;
}
#estruturaProduto #malha .swap-input:focus{
border-color: rgba(234,179,8,.65); background: rgba(255,255,255,.10);
}
#estruturaProduto #malha .swap-actions{ display:flex; gap:8px; justify-content:flex-end; align-items:center; }
#estruturaProduto #malha .swap-btn{
height:32px; padding:0 10px; border-radius:8px; cursor:pointer;
border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.08); color:#fff;
}
#estruturaProduto #malha .swap-btn:hover{ background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.22); }
/* Resultados ocupam a linha inteira abaixo */
#estruturaProduto #malha .swap-results{ grid-column: 1 / -1; margin-top: 8px; max-height: 260px; overflow:auto;
background: rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.12); border-radius: 10px; }
#estruturaProduto #malha .swap-results ul{ list-style:none; margin:0; padding:6px; }
#estruturaProduto #malha .swap-results li{
padding:8px 10px; border-radius:8px; cursor:pointer;
display:grid; grid-template-columns: 140px minmax(0,1fr); column-gap: 12px; align-items:center;
}
#estruturaProduto #malha .swap-results li:hover{ background: rgba(234,179,8,.20); }
#estruturaProduto #malha .swap-results .codigo{ font-weight:600; opacity:.95; }
#estruturaProduto #malha .swap-results .descricao{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
/* Destaque do termo digitado */
#estruturaProduto #malha mark.hi{ background: rgba(234,179,8,.6); color:#111; padding:0 .08em; border-radius:3px; }
#estruturaProduto #malha .qtd,
#estruturaProduto #malha .unidade,
#estruturaProduto #malha .custo-real { text-align: center; }
/* Opera��o fica padr�o (esquerda); se quiser nomear classe: */
#estruturaProduto #malha .operacao { text-align:left; }
/* Spinner da aba "Estrutura de produto" (independente) */
#estruturaSpinner{
display:none; /* vis�vel s� durante import/atualiza��es */
width:18px; height:18px;
align-items:center;
margin-left:.5rem;
}
#estruturaSpinner svg{ width:100%; height:100%; display:block; }
@keyframes estrutura-rot { to { transform: rotate(360deg); } }
#estruturaSpinner .estrutura-spin{
transform-origin:50% 50%;
animation: estrutura-rot .8s linear infinite;
stroke: currentColor; stroke-width:4; fill:none; stroke-linecap:round;
stroke-dasharray: 90; stroke-dashoffset: 60;
}
/* Spinner da aba "Estrutura de produto" � mesmo visual do Kanban */
#estruturaSpinner{
display: none; /* fica oculto por padr�o */
align-items: center;
gap: 6px;
}
#estruturaSpinner .kanban-spinner{
display: inline-block !important; /* sobrep�e regra global do Kanban */
font-size: 16px; /* mesmo tamanho usado no Kanban */
width: 16px;
height: 16px;
line-height: 16px;
}
/* ======================================================================
PCP � Lista de pe�as (guia PCP)
PATCH V3 � garante visibilidade da coluna "A��o":
- Ajusta a malha para caber sem cortar (larguras mais compactas);
- Ativa overflow-x:auto no UL da PCP quando em modo grid-pecas;
- Mant�m tudo escopado � PCP sem afetar outras �reas.
Layout: C�digo | Descri��o | Unid | Qtd | Qtd prod | Qtd Pro | Qtd Alm | A��o
====================================================================== */
/* PCP � grade padr�o: C�digo | Descri��o | Unid | Qtd | Qtd prod | Arm Pro | Almox | A��o */
#listaPecasPCPList {
/* Usamos uma vari�vel para compartilhar o mesmo grid entre header e linhas */
--pcp-grid: 150px /* C�digo (mais largo p/ evitar truncar demais) */
minmax(160px,0.65fr)/* Descri��o (reduz um pouco para abrir espa�o ao c�digo) */
60px /* Unid */
60px /* Qtd */
70px /* Qtd prod */
60px /* Arm Pro */
60px /* Arm Alm */
minmax(160px,0.25fr);/* A��o: �cones com folga */
}
#listaPecasPCPList.grid-pecas {
width: 100%;
overflow-x: auto; /* seguran�a em telas muito estreitas */
}
/* Cabe�alho e linhas de dados usam a mesma malha */
#listaPecasPCPList .header-row,
#listaPecasPCPList li.data-row {
display: grid;
grid-template-columns: var(--pcp-grid);
column-gap: 12px;
align-items: center;
}
/* MUITO IMPORTANTE: permitir encolhimento da c�lula em grids */
#listaPecasPCPList .desc {
min-width: 0; /* sem isto, a descri��o empurra e corta os bot�es */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* Ajuste da c�lula de a��es para n�o encolher demais */
/* PCP � c�lula de a��es alinhada � ESQUERDA e na ordem LTR */
#listaPecasPCPList .acao {
display: flex;
align-items: center;
justify-content: flex-start; /* antes: flex-end */
gap: 8px;
min-width: 200px; /* ajuste que voc� j� vinha usando */
overflow: visible;
}
/* override seguro s� na PCP */
#listaPecasPCPList.grid-pecas .acao { justify-content: flex-start !important; }
/* PCP � t�tulo da coluna A��o alinhado � esquerda */
#listaPecasPCPList .header-row > *:last-child {
text-align: left;
justify-content: flex-start;
}
/* Bot�es n�o devem �shrinkar� dentro do flex */
#listaPecasPCPList .acao .icon-btn {
flex: 0 0 auto;
width: 36px;
height: 36px;
padding: 6px;
}
#listaPecasPCPList.grid-pecas li {
display: grid !important;
white-space: normal !important;
grid-template-columns: var(--pcp-grid) !important;
gap: 8px;
align-items: center;
padding: 8px 18px;
box-sizing: border-box;
}
/* Cabe�alho fixo com a mesma grade */
#listaPecasPCPList.grid-pecas li.header-row {
position: sticky;
top: 0;
z-index: 2;
background: rgba(16,18,27,0.92);
backdrop-filter: blur(4px);
border-bottom: 1px solid var(--border-color);
font-weight: bold;
text-align: center;
}
#listaPecasPCPList.grid-pecas li.header-row > .cod,
#listaPecasPCPList.grid-pecas li.header-row > .desc {
text-align: left;
}
/* Descri��o com elipse */
#listaPecasPCPList.grid-pecas .desc {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
#listaPecasPCPList .cod {
display:flex;
align-items:center;
gap:6px;
min-width:0;
overflow:hidden;
}
#listaPecasPCPList .cod > span {
flex:1;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
#listaPecasPCPList .cod .pp-select-item{
flex:1;
min-width:0;
}
/* N�meros centralizados e tabulares */
#listaPecasPCPList.grid-pecas .unid,
#listaPecasPCPList.grid-pecas .qtd,
#listaPecasPCPList.grid-pecas .qtdprod,
#listaPecasPCPList.grid-pecas .qtdpro,
#listaPecasPCPList.grid-pecas .qtdalm {
text-align: center;
font-variant-numeric: tabular-nums;
}
/* A��o centralizada sem quebra e com largura m�nima coerente */
#listaPecasPCPList.grid-pecas .acao {
display: flex;
justify-content: center;
align-items: center;
gap: 6px;
white-space: nowrap;
min-width: 80px; /* seguran�a extra para n�o "sumir" ao encolher a grade */
overflow: hidden;
}
#listaPecasPCPList.grid-pecas .acao svg {
width: 16px;
height: 16px;
margin: 0 !important;
}
/* -- PCP: sub-estrutura (abre logo abaixo da linha) ------------------- */
#listaPecasPCPList .pcp-subestrutura { padding: 0; }
#listaPecasPCPList .pcp-subestrutura > .sub-wrap{
grid-column: 1 / -1;
margin: 8px 0 10px;
padding: 8px 12px 10px;
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.10);
border-radius: 10px;
}
#listaPecasPCPList .pcp-subestrutura .sub-title{
font-weight: 600; margin: 0 0 6px; opacity: .9;
}
#listaPecasPCPList .pcp-subestrutura .sub-grid{
list-style: none; margin: 0; padding: 0;
overflow-x: auto;
}
/* Cod | Desc | Unid | Qtd | Qtd prod | Qtd Pro | Qtd Alm | A��o */
/* Grid da sub-estrutura: Cod | Desc | Unid | Qtd | Qtd prod | Qtd Pro | Qtd Alm | A��o */
#listaPecasPCPList .pcp-subestrutura .sub-grid .child-row,
/* Header da sub-estrutura */
#listaPecasPCPList .pcp-subestrutura .sub-grid .sub-header{
display: grid;
grid-template-columns: var(--pcp-grid, 130px minmax(200px,0.75fr) 50px 50px 52px 50px 50px minmax(150px,0.25fr));
column-gap: 12px;
align-items: center;
padding: 6px 18px;
width: 100%;
min-width: 850px; /* mant�m espa�o m�nimo p/ coluna de a��o; ativa scroll horizontal quando necess�rio */
border-radius: 8px;
}
#listaPecasPCPList .pcp-subestrutura .sub-grid .child-row{
background: rgba(16,18,27,0.58);
border: 1px solid rgba(255,255,255,.10);
font-weight: 500;
}
/* Header da sub-estrutura */
#listaPecasPCPList .pcp-subestrutura .sub-grid .sub-header{
position: sticky;
top: 0;
z-index: 1;
margin: 6px 0 4px;
background: rgba(16,18,27,0.6);
border: 1px solid rgba(255,255,255,.10);
border-radius: 8px;
font-weight: 600;
}
#listaPecasPCPList .pcp-subestrutura .sub-grid .sub-header .cod,
#listaPecasPCPList .pcp-subestrutura .sub-grid .sub-header .desc{
text-align: left;
}
#listaPecasPCPList .pcp-subestrutura .sub-grid .sub-header .unid,
#listaPecasPCPList .pcp-subestrutura .sub-grid .sub-header .qtd,
#listaPecasPCPList .pcp-subestrutura .sub-grid .sub-header .qtdprod,
#listaPecasPCPList .pcp-subestrutura .sub-grid .sub-header .qtdpro,
#listaPecasPCPList .pcp-subestrutura .sub-grid .sub-header .qtdalm,
#listaPecasPCPList .pcp-subestrutura .sub-grid .sub-header .acao{
text-align: center;
}
#listaPecasPCPList .pcp-subestrutura .sub-grid .desc{
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
#listaPecasPCPList .pcp-subestrutura .sub-grid .unid,
#listaPecasPCPList .pcp-subestrutura .sub-grid .qtd,
#listaPecasPCPList .pcp-subestrutura .sub-grid .qtdprod,
#listaPecasPCPList .pcp-subestrutura .sub-grid .qtdpro,
#listaPecasPCPList .pcp-subestrutura .sub-grid .qtdalm{
text-align: center; font-variant-numeric: tabular-nums;
}
#listaPecasPCPList .pcp-subestrutura .sub-grid .acao{
display:flex; justify-content:center; align-items:center;
gap:6px; white-space:nowrap; min-width:0; max-width:100%;
overflow:hidden; padding:0 6px;
}
#listaPecasPCPList .pcp-subestrutura .sub-grid .acao svg{ width:16px; height:16px; margin:0 !important; }
#listaPecasPCPList .pcp-subestrutura .sub-grid .acao .icon-btn{
flex:0 0 36px;
}
#listaPecasPCPList .pcp-subestrutura .sub-grid .sub-header > *{
display:flex;
align-items:center;
justify-content:center;
}
#listaPecasPCPList .pcp-subestrutura .sub-grid .sub-header .cod,
#listaPecasPCPList .pcp-subestrutura .sub-grid .sub-header .desc{
justify-content:flex-start;
}
/* -- PCP: agrupamento visual para itens de prepara��o (c�digos PP) ------------------- */
#listaPecasPCPList.grid-pecas li.pcp-pp-group,
#listaPecasPCPList.grid-pecas li.pcp-section-divider{
display: block !important;
grid-template-columns: none !important;
gap: 0 !important;
padding: 0 !important;
}
#listaPecasPCPList .pcp-pp-group{ list-style:none; }
#listaPecasPCPList .pcp-section-divider{ list-style:none; }
#listaPecasPCPList .pcp-pp-card{
margin: 12px 0 10px;
padding: 12px 0 10px;
border-radius: 12px;
border: 1px solid rgba(34,197,94,0.28);
background: rgba(34,197,94,0.08);
box-shadow: inset 0 0 0 1px rgba(34,197,94,0.12);
}
#listaPecasPCPList .pcp-pp-card-header{
display:flex;
align-items:center;
justify-content:space-between;
padding: 0 18px 10px;
font-size: .85rem;
}
#listaPecasPCPList .pcp-pp-master{
display:flex;
align-items:center;
gap:10px;
color: rgba(187,247,208,0.85);
font-size:.85rem;
letter-spacing:.02em;
cursor: pointer;
}
#listaPecasPCPList .pcp-pp-master input,
#listaPecasPCPList .pcp-pp-card-list .pp-select-checkbox,
#listaPecasPCPList .pcp-parent-row .pp-select-checkbox{
width: 18px;
height: 18px;
accent-color: #22c55e;
cursor: pointer;
}
#listaPecasPCPList .pcp-pp-card-title{
font-weight: 600;
color: #22c55e;
}
#listaPecasPCPList .pcp-pp-card-actions{
display:flex;
align-items:center;
gap:12px;
}
#listaPecasPCPList .pcp-pp-card-count{
font-size: .72rem;
padding: 4px 10px;
border-radius: 999px;
background: rgba(34,197,94,0.22);
color: rgba(240,253,244,0.9);
text-transform: uppercase;
letter-spacing: .1em;
}
#listaPecasPCPList .pcp-pp-card-produce{
flex:0 0 auto;
}
#listaPecasPCPList .pcp-pp-card-list{
list-style:none;
margin: 0;
padding: 0 0 8px;
display:flex;
flex-direction:column;
gap: 6px;
}
#listaPecasPCPList .pcp-pp-card-list li.data-row{
border-radius: 10px;
border: 1px solid rgba(34,197,94,0.28);
background: rgba(34,197,94,0.12);
}
#listaPecasPCPList .pcp-pp-card-list .pp-subitem-row{
border-radius: 8px;
border: 1px dashed rgba(34,197,94,0.2);
background: rgba(13,148,136,0.15);
font-size: 0.9rem;
margin-top: 4px;
}
#listaPecasPCPList .pcp-pp-card-list .pp-subitem-row .cod{
position: relative;
padding-left: 16px;
display:flex;
align-items:center;
gap:4px;
}
#listaPecasPCPList .pcp-pp-card-list .pp-subitem-row .cod::before{
content: '?';
position: absolute;
left: 0;
color: rgba(34,197,94,0.85);
}
#listaPecasPCPList .pcp-pp-card-list .pp-subitem-row .cod .pp-select-item{
margin-left: 8px;
}
#listaPecasPCPList .pcp-pp-card-list .pp-select-item,
#listaPecasPCPList .pcp-parent-row .pp-select-item{
display:flex;
align-items:center;
gap:6px;
cursor: pointer;
}
#listaPecasPCPList .pcp-pp-card-list .pp-select-item span,
#listaPecasPCPList .pcp-parent-row .pp-select-item span{
flex:1;
color: inherit;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
#listaPecasPCPList .pcp-pp-card-list .pp-select-item input,
#listaPecasPCPList .pcp-parent-row .pp-select-item input{
flex:0 0 auto;
width:16px;
height:16px;
}
#listaPecasPCPList .pcp-parent-row{
margin: 10px 0 6px;
border-radius: 10px;
border: 1px solid rgba(59,130,246,0.38);
background: rgba(37,99,235,0.18);
box-shadow: inset 0 0 0 1px rgba(37,99,235,0.25);
}
#listaPecasPCPList .pcp-parent-row .cod .pp-select-item{
display:flex;
align-items:center;
gap:10px;
cursor: pointer;
}
#listaPecasPCPList .pcp-parent-row .cod .pp-select-item span{
flex:1;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
#listaPecasPCPList .pcp-parent-id{ display:none; }
#listaPecasPCPList .pcp-parent-row .qtd,
#listaPecasPCPList .pp-row .qtd{
display:flex;
align-items:center;
}
#listaPecasPCPList .pcp-parent-factor,
#listaPecasPCPList .pp-qtd-input{
width:100%;
padding:6px 10px;
border-radius:8px;
border:1px solid rgba(96,165,250,0.55);
background: rgba(15,23,42,0.75);
color:#f8fafc;
font-size:0.95rem;
outline:none;
transition: border-color .12s ease, background .12s ease;
text-align:right;
font-variant-numeric: tabular-nums;
}
#listaPecasPCPList .pcp-parent-factor,
#listaPecasPCPList .pp-qtd-input{
appearance: textfield;
-webkit-appearance: textfield;
-moz-appearance: textfield;
}
#listaPecasPCPList .pcp-parent-factor::-webkit-outer-spin-button,
#listaPecasPCPList .pcp-parent-factor::-webkit-inner-spin-button,
#listaPecasPCPList .pp-qtd-input::-webkit-outer-spin-button,
#listaPecasPCPList .pp-qtd-input::-webkit-inner-spin-button{
-webkit-appearance: none;
margin: 0;
}
#listaPecasPCPList .pp-row .pp-qtd-input{
border-color: rgba(34,197,94,0.55);
background: rgba(6,78,59,0.45);
}
#listaPecasPCPList .pcp-parent-factor:focus,
#listaPecasPCPList .pp-qtd-input:focus{
border-color: rgba(125,211,252,0.85);
background: rgba(15,23,42,0.95);
}
#listaPecasPCPList .pp-row .pp-qtd-input:focus{
border-color: rgba(34,197,94,0.8);
background: rgba(6,78,59,0.6);
}
#listaPecasPCPList .pcp-parent-row .acao.parent-actions{
display:flex;
justify-content:flex-start;
align-items:center;
gap:8px;
}
#listaPecasPCPList .pcp-section-divider{
display:flex;
align-items:center;
gap: 12px;
margin: 0;
padding: 14px 18px 6px;
font-size: .78rem;
text-transform: uppercase;
letter-spacing: .12em;
color: rgba(226,232,240,0.65);
}
#listaPecasPCPList .pcp-section-divider span{
flex:0 0 auto;
}
#listaPecasPCPList .pcp-section-divider::after{
content:'';
display:block;
flex:1;
height:1px;
background: rgba(148,163,184,0.25);
}
/* ============================= FIM DO PATCH PCP V3 ============================= */
/* ======================================================================
PCP � destaque visual para itens com PP + esconder bot�o Produzir
(Use estas classes no HTML/JS j� implementado)
- Adicione a classe `is-pp` no elemento do c�digo (ex.: )
ou na linha inteira com `pp` (ex.:
).
- Para itens que N�O possuem PP, coloque a classe `no-pp` na linha.
====================================================================== */
:root{ --pp-green:#22c55e; } /* verde */
#listaPecasPCPList .cod.is-pp,
#listaPecasPCPList li.pp .cod,
#listaPecasPCPList .pp-code,
#listaPecasPCPList .pcp-subestrutura .cod.is-pp,
#listaPecasPCPList .pcp-subestrutura .child-row.pp .cod{
color: var(--pp-green) !important;
font-weight: 600;
}
/* Esconde o bot�o Produzir em itens sem PP */
#listaPecasPCPList li.no-pp .produce-btn,
#listaPecasPCPList .pcp-subestrutura .child-row.no-pp .produce-btn{
display: none !important;
}
/* A��o: pequena folga extra para caber o novo bot�o �Trocar� */
#listaPecasPCPList.grid-pecas .acao{
min-width: 112px; /* era 80px; espa�o p/ +1 �cone */
gap: 8px;
}
/* Sub-estrutura: cabe�alho j� inclu�do; apenas refor�o de contraste */
#listaPecasPCPList .pcp-subestrutura .sub-grid .sub-header{
background: rgba(16,18,27,0.72);
border: 1px solid rgba(255,255,255,.14);
}
/* C�digos PP em verde (vence regras mais espec�ficas do tema) */
#listaPecasPCPList li.data-row .cod.pp,
#listaPecasPCPList .pcp-subestrutura .child-row .cod.pp {
color: #22c55e !important;
font-weight: 600 !important;
}
/* -- Painel "Trocar produto" (PCP + Estrutura de produto) ------------------- */
#listaPecasPCPList li.pcp-troca,
#estruturaProduto #malha li.pcp-troca { padding: 0; }
#listaPecasPCPList li.pcp-troca > .troca-wrap,
#estruturaProduto #malha li.pcp-troca > .troca-wrap{
grid-column: 1 / -1;
margin: 8px 0 10px;
padding: 10px 12px 12px;
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.10);
border-radius: 10px;
}
#listaPecasPCPList .troca-title,
#estruturaProduto #malha .troca-title{ font-weight: 600; margin-bottom: 8px; opacity: .95; }
#listaPecasPCPList .troca-input-row,
#estruturaProduto #malha .troca-input-row{ margin-bottom: 8px; }
#listaPecasPCPList .troca-input,
#estruturaProduto #malha .troca-input{
width: 100%; padding: 8px 10px; border-radius: 8px;
border: 1px solid rgba(255,255,255,.15); background: rgba(0,0,0,.25);
color: #fff; outline: none;
}
#listaPecasPCPList .troca-input:focus,
#estruturaProduto #malha .troca-input:focus{ border-color: rgba(255,255,255,.28); }
/* Lista de resultados (com espa�amento) */
#listaPecasPCPList .troca-results,
#estruturaProduto #malha .troca-results{
list-style: none; margin: 6px 0 0; padding: 2px 2px 2px 0;
max-height: 280px; overflow: auto;
display: grid;
grid-auto-rows: minmax(36px, auto);
row-gap: 6px;
}
#listaPecasPCPList .troca-results > li,
#estruturaProduto #malha .troca-results > li{
display: grid;
grid-template-columns: 160px minmax(240px,1fr) minmax(120px,auto);
column-gap: 1rem;
align-items: center;
padding: 8px 10px;
border-radius: 10px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
}
#listaPecasPCPList .troca-results > li:hover,
#estruturaProduto #malha .troca-results > li:hover{ background: rgba(255,255,255,.08); cursor: pointer; }
#listaPecasPCPList .troca-results > li.selected,
#estruturaProduto #malha .troca-results > li.selected{ outline: 2px solid rgba(255,255,255,.15); }
#listaPecasPCPList .troca-results .desc,
#estruturaProduto #malha .troca-results .desc{
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
#listaPecasPCPList .troca-results .loading,
#listaPecasPCPList .troca-results .nores,
#listaPecasPCPList .troca-results .error,
#estruturaProduto #malha .troca-results .loading,
#estruturaProduto #malha .troca-results .nores,
#estruturaProduto #malha .troca-results .error{
grid-column: 1 / -1; background: none; border: 0; padding: 4px 2px; border-radius: 0; opacity: .8;
}
/* PP em verde tamb�m nos resultados */
#listaPecasPCPList .troca-results .cod.pp,
#estruturaProduto #malha .troca-results .cod.pp{ color:#22c55e; font-weight:600; }
#listaPecasPCPList .troca-results .src,
#estruturaProduto #malha .troca-results .src{
justify-self: end; opacity: .6; font-size: 12px; white-space: nowrap;
}
/* ============================================================
PCP � FIX DEFINITIVO: �cones cortados dentro dos bot�es
Escopo: APENAS na lista PCP (grid-pecas), sem afetar o resto.
� Resolve conflitos de:
� tamanhos divergentes de .icon-btn/.produce-btn
� svg posicionado como absolute (cortava/ desalinhava)
� overflow:hidden em ancestrais
============================================================ */
/* Nunca corte conte�do das linhas/cabe�alho/coluna A��o na PCP */
#listaPecasPCPList.grid-pecas li,
#listaPecasPCPList.grid-pecas .header-row,
#listaPecasPCPList.grid-pecas .acao {
overflow: visible !important;
min-height: 38px; /* garante altura m�nima confort�vel */
}
/* Bot�es da coluna A��o: tamanho fixo, centrados por flex */
#listaPecasPCPList.grid-pecas .acao .icon-btn,
#listaPecasPCPList.grid-pecas .acao .produce-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 36px !important;
height: 36px !important;
padding: 0 !important;
line-height: 0 !important;
border-radius: 10px !important;
flex: 0 0 auto !important;
overflow: visible !important; /* n�o aparar o SVG */
}
/* �cones dentro dos bot�es: blocados e sem absolute (para n�o �cortar�) */
#listaPecasPCPList.grid-pecas .acao .icon-btn svg,
#listaPecasPCPList.grid-pecas .acao .produce-btn svg {
display: block !important;
width: 18px !important;
height: 18px !important;
position: static !important; /* sobrep�e qualquer absolute herdado */
left: auto !important;
top: auto !important;
transform: none !important;
margin: 0 !important;
}
/* ============================================================
PCP � ICON CLIP FIX v3 (prioridade alta, n�o-invasivo)
- Garante caixa 40x40 nos bot�es de A��o
- Reduz e centraliza QUALQUER tipo de �cone (svg, i.fa, pseudo ::before, texto)
- Remove clipping por overflow/clip/mask em ancestrais
- Mant�m impacto restrito � PCP
============================================================ */
/* Nunca cortar conte�do na PCP */
#listaPecasPCPList.grid-pecas,
#listaPecasPCPList.grid-pecas * {
clip: auto !important;
clip-path: none !important;
-webkit-clip-path: none !important;
mask: none !important;
-webkit-mask: none !important;
}
#listaPecasPCPList.grid-pecas .header-row,
#listaPecasPCPList.grid-pecas li,
#listaPecasPCPList.grid-pecas .acao {
overflow: visible !important;
}
#listaPecasPCPList.grid-pecas .acao {
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 10px !important;
min-width: 200px !important;
}
/* Caixa do bot�o � 40x40, centro perfeito, nada de corte */
#listaPecasPCPList.grid-pecas .acao .icon-btn,
#listaPecasPCPList.grid-pecas .acao .produce-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 40px !important;
height: 40px !important;
padding: 0 !important;
line-height: 0 !important;
border-radius: 12px !important;
box-sizing: border-box !important;
overflow: visible !important;
position: relative !important;
flex: 0 0 auto !important;
}
/* Zera fontes do bot�o para que conte�do interno controle o tamanho */
#listaPecasPCPList.grid-pecas .acao .icon-btn,
#listaPecasPCPList.grid-pecas .acao .produce-btn {
font-size: 0 !important;
}
/* Quaisquer filhos do bot�o (svg, i, .fa, span, pseudo) centralizados e menores que a caixa */
#listaPecasPCPList.grid-pecas .acao .icon-btn > *,
#listaPecasPCPList.grid-pecas .acao .produce-btn > * {
display: block !important;
max-width: 22px !important;
max-height: 22px !important;
width: 22px !important;
height: 22px !important;
margin: 0 !important;
transform: translateZ(0) scale(0.9) !important;
transform-origin: 50% 50% !important;
line-height: 1 !important;
overflow: visible !important;
}
/* Suporte expl�cito a Font Awesome / �cones por texto */
#listaPecasPCPList.grid-pecas .acao .icon-btn i,
#listaPecasPCPList.grid-pecas .acao .icon-btn .fa,
#listaPecasPCPList.grid-pecas .acao .produce-btn i,
#listaPecasPCPList.grid-pecas .acao .produce-btn .fa,
#listaPecasPCPList.grid-pecas .acao .icon-btn::before,
#listaPecasPCPList.grid-pecas .acao .produce-btn::before {
font-size: 18px !important;
line-height: 1 !important;
width: 22px !important;
height: 22px !important;
text-align: center !important;
}
/* SVG com tra�o n�o deve �estourar� */
#listaPecasPCPList.grid-pecas .acao .icon-btn svg,
#listaPecasPCPList.grid-pecas .acao .produce-btn svg {
width: 22px !important;
height: 22px !important;
overflow: visible !important;
stroke: currentColor;
vector-effect: non-scaling-stroke;
}
/* Evita que cliques no �cone falhem por conta do scale */
#listaPecasPCPList.grid-pecas .acao .icon-btn > *,
#listaPecasPCPList.grid-pecas .acao .produce-btn > * {
pointer-events: none !important;
}
/* Descri��o realmente encolhe */
#listaPecasPCPList.grid-pecas .desc {
min-width: 0 !important;
overflow: hidden !important;
white-space: nowrap !important;
text-overflow: ellipsis !important;
}
/* PCP: desliga pseudo-�cones herdados e garante caixa dos bot�es */
#listaPecasPCPList.grid-pecas .acao .status-button::before,
#listaPecasPCPList.grid-pecas .acao .status-button::after,
#listaPecasPCPList.grid-pecas .acao .icon-btn::before,
#listaPecasPCPList.grid-pecas .acao .produce-btn::before {
content: none !important; /* remove �o �� etc. */
}
#listaPecasPCPList.grid-pecas .acao .icon-btn,
#listaPecasPCPList.grid-pecas .acao .produce-btn,
#listaPecasPCPList.grid-pecas .acao .status-button {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 30px !important;
height: 30px !important;
padding: 0 !important;
line-height: 0 !important;
border-radius: 12px !important;
overflow: visible !important;
}
#listaPecasPCPList.grid-pecas .acao .icon-btn svg,
#listaPecasPCPList.grid-pecas .acao .produce-btn svg,
#listaPecasPCPList.grid-pecas .acao .status-button svg {
display: block !important;
width: 22px !important;
height: 22px !important;
}
/* === PCP � Painel de troca de produto (UI apenas) === */
.pcp-troca .troca-wrap{
padding: 8px 10px;
border-left: 3px solid var(--border-color, #3b82f6);
background: var(--panel, rgba(255,255,255,0.04)); /* mant�m tema escuro */
color: var(--fg, #e5e7eb); /* texto claro no tema escuro */
border-radius: 8px;
}
.pcp-troca .troca-title{
font-weight: 600;
margin-bottom: 6px;
}
.pcp-troca .troca-input{
width: 100%;
padding: 6px 8px;
border: 1px solid var(--border, #374151);
border-radius: 6px;
background: var(--input-bg, rgba(0,0,0,.25));
color: var(--fg, #e5e7eb);
outline: none;
}
.pcp-troca .troca-results{
list-style: none;
margin: 8px 0 0;
padding: 0;
max-height: 240px;
overflow: auto;
border: 1px solid var(--border, #374151);
border-radius: 6px;
background: var(--panel, rgba(0,0,0,.25)); /* N�O usar branco no tema escuro */
}
.pcp-troca .troca-results li{
padding: 8px 10px;
color: var(--fg, #e5e7eb);
}
.pcp-troca .troca-results li.info{
opacity: .75;
}
.pcp-troca .troca-results li.error{
color: #ffb4b4;
}
.pcp-troca .troca-item{
display: grid;
grid-template-columns: 160px 1fr;
gap: 10px;
align-items: center;
cursor: pointer;
border-bottom: 1px solid rgba(255,255,255,.06);
}
.pcp-troca .troca-item:last-child{ border-bottom: 0; }
.pcp-troca .troca-item:hover{
background: rgba(255,255,255,.06);
}
.pcp-troca .troca-item .cod{
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
white-space: nowrap;
}
.pcp-troca .troca-item .desc{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Badge "trocado" dentro da c�lula de Descri��o, sem deslocar colunas */
.swap-pill{
display: inline-block;
margin-left: 6px;
padding: 2px 6px;
border-radius: 10px;
border: 1px solid currentColor;
font-size: 11px;
line-height: 1;
opacity: .8;
vertical-align: middle;
}
/* PCP � descri��o de item trocado: amarelo, sem selo */
.data-row .desc.desc-trocado,
.pcp-subestrutura .desc.desc-trocado{
color: #facc15; /* amarelo leg�vel no tema escuro */
font-weight: 600; /* leve �nfase */
}
/* caso ainda exista algum .swap-pill no DOM antigo, esconder */
.swap-pill{ display: none !important; }
/* ============================================================
FIM DO PATCH ICON CLIP FIX v3
============================================================ */
.transfer-select option.is-inactive {
color: #888;
}
.transfer-qtd-bulk {
width: 70px;
padding: 2px 4px;
background: #121212;
border: 1px solid #333;
color: #eee;
border-radius: 4px;
text-align: right;
appearance: textfield;
-moz-appearance: textfield;
}
.transfer-qtd-bulk:focus {
outline: 1px solid #3fa7ff;
}
.transfer-qtd-bulk::-webkit-outer-spin-button,
.transfer-qtd-bulk::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* ============================================================
NAVIGATION CARDS SYSTEM - Grid de Navega��o Moderna
============================================================ */
.product-nav-grid {
display: grid;
grid-template-columns: repeat(3, 140px);
gap: 16px;
width: auto;
padding: 0;
background: rgba(30, 30, 30, 0.98) !important; /* Fundo quase opaco para dark mode */
backdrop-filter: blur(10px);
}
.light-mode .product-nav-grid {
background: rgba(255, 255, 255, 0.98) !important; /* Fundo quase opaco para light mode */
}
.product-nav-grid.collapsed {
display: none;
}
.nav-card {
background: var(--modal-bg-color);
border: 2px solid var(--card-border-color);
border-radius: 12px;
padding: 20px 16px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
text-decoration: none;
position: relative;
overflow: hidden;
}
.nav-card:hover {
transform: translateY(-4px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
border-color: var(--primary-color);
}
.nav-card.active {
border-color: var(--primary-color);
background: linear-gradient(135deg,
rgba(59, 130, 246, 0.05) 0%,
rgba(37, 99, 235, 0.08) 100%);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}
.nav-card.active::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--primary-color);
}
.nav-card-action {
background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(37, 99, 235, 0.15) 100%);
}
.nav-card-action:hover {
background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(37, 99, 235, 0.2) 100%);
border-color: var(--primary-color);
}
.nav-card-icon {
width: 56px;
height: 56px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 24px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
transition: all 0.3s ease;
}
.nav-card:hover .nav-card-icon {
transform: scale(1.1) rotate(5deg);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}
.nav-card-title {
font-size: 14px;
font-weight: 600;
color: var(--content-title-color);
text-align: center;
line-height: 1.3;
transition: color 0.3s ease;
}
.nav-card.active .nav-card-title {
color: var(--primary-color);
}
/* Responsivo */
@media (max-width: 768px) {
.product-nav-grid {
grid-template-columns: repeat(2, 120px);
gap: 12px;
}
.nav-card {
padding: 16px 12px;
}
.nav-card-icon {
width: 48px;
height: 48px;
font-size: 20px;
}
.nav-card-title {
font-size: 12px;
}
}
@media (min-width: 1400px) {
.product-nav-grid {
grid-template-columns: repeat(4, 140px);
}
}
/* ============================================================
TAB HEADERS - Sistema de Cabe�alhos Padronizados
============================================================ */
/* Container principal do cabe�alho da tab */
.tab-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
}
/* �cone do cabe�alho */
.tab-header-icon {
width: 40px;
height: 40px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.tab-header-icon i {
color: #fff;
font-size: 18px;
}
/* �cone pequeno (para estrutura) */
.tab-header-icon.small {
width: 36px;
height: 36px;
}
.tab-header-icon.small i {
font-size: 16px;
}
/* Conte�do textual */
.tab-header-content {
flex: 1;
min-width: 0;
}
.tab-header-title {
margin: 0 0 4px 0;
color: var(--content-title-color);
font-size: 19px;
font-weight: 600;
line-height: 1.2;
}
.tab-header-subtitle {
margin: 0;
color: var(--inactive-color);
font-size: 13px;
line-height: 1.4;
}
/* Cards de se��o com gradiente sutil */
.tab-section-card {
background: linear-gradient(135deg, var(--content-bg) 0%, rgba(0, 0, 0, 0.02) 100%);
border: 1px solid var(--border-color);
border-radius: 16px;
padding: 24px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}
/* Variantes de cor por tema */
.tab-header-icon.theme-purple {
background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
box-shadow: 0 4px 12px rgba(109, 40, 217, 0.35);
}
.tab-header-icon.theme-cyan {
background: linear-gradient(135deg, #06b6d4 0%, #0ea5e9 100%);
box-shadow: 0 4px 12px rgba(14, 165, 233, 0.35);
}
.tab-header-icon.theme-blue {
background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35);
}
.tab-header-icon.theme-indigo {
background: linear-gradient(135deg, #818cf8 0%, #4f46e5 100%);
box-shadow: 0 4px 12px rgba(79, 70, 229, 0.35);
}
.tab-header-icon.theme-green {
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
}
.tab-header-icon.theme-amber {
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
}
.tab-header-icon.theme-sky {
background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
box-shadow: 0 4px 12px rgba(2, 132, 199, 0.35);
}
.tab-header-icon.theme-emerald {
background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
box-shadow: 0 4px 12px rgba(34, 197, 94, 0.35);
}
/* Bot�es de a��o padronizados */
.tab-action-btn {
padding: 10px 16px;
border: none;
border-radius: 8px;
color: white;
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
transition: all 0.2s;
font-family: var(--body-font);
font-size: 14px;
}
.tab-action-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
.tab-action-btn:active {
transform: translateY(0);
}
.tab-action-btn.btn-primary {
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}
.tab-action-btn.btn-success {
background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
}
/* Cards de conte�do com gradientes sutis por tema */
.tab-section-card.theme-purple {
background: linear-gradient(135deg, var(--content-bg) 0%, rgba(139, 92, 246, 0.04) 100%);
}
.tab-section-card.theme-cyan {
background: linear-gradient(135deg, var(--content-bg) 0%, rgba(6, 182, 212, 0.04) 100%);
}
.tab-section-card.theme-blue {
background: linear-gradient(135deg, var(--content-bg) 0%, rgba(59, 130, 246, 0.04) 100%);
}
.tab-section-card.theme-indigo {
background: linear-gradient(135deg, var(--content-bg) 0%, rgba(99, 102, 241, 0.04) 100%);
}
.tab-section-card.theme-green {
background: linear-gradient(135deg, var(--content-bg) 0%, rgba(16, 185, 129, 0.04) 100%);
}
.tab-section-card.theme-amber {
background: linear-gradient(135deg, var(--content-bg) 0%, rgba(245, 158, 11, 0.04) 100%);
}
.tab-section-card.theme-emerald {
background: linear-gradient(135deg, var(--content-bg) 0%, rgba(34, 197, 94, 0.04) 100%);
}
/* Modo claro - ajustes de cor */
.light-mode .tab-header-title {
color: var(--theme-color);
}
.light-mode .tab-section-card {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
/* ========================================
Kanban Card - Expandir/Recolher
======================================== */
.kanban-card-collapsed .kanban-op-list,
.kanban-card-collapsed .kanban-card-actions-wrapper {
display: none !important;
}
.kanban-code-header {
cursor: pointer;
user-select: none;
transition: background-color 0.2s ease;
}
.kanban-code-header:hover {
background-color: rgba(255, 255, 255, 0.05);
border-radius: 6px;
}
.kanban-toggle-icon {
margin-left: auto;
transition: transform 0.3s ease;
font-size: 0.85rem;
color: rgba(255, 255, 255, 0.6);
}
.kanban-code-location {
display: inline-flex;
align-items: center;
padding: 2px 8px;
background: rgba(255, 255, 255, 0.1);
border-radius: 4px;
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.8);
font-weight: 500;
}
.kanban-op-list {
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
animation: expandDown 0.3s ease;
}
@keyframes expandDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.kanban-card-actions-wrapper {
animation: expandDown 0.3s ease;
}
/* Cache bust 1768834639 */
/* Anima��o de spinner para carregamento */
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes ft-spin-cw { to { transform: rotate(360deg); } }
@keyframes ft-spin-ccw { to { transform: rotate(-360deg); } }
/* Spinner Fromtherm: SVG original (setas com ponta), fundo transparente, sem giro extra no CSS */
img.ft-spinner-img,
img.boot-spinner,
img.agenda-processing-spinner {
display: block;
background: none !important;
border: 0;
object-fit: contain;
}
.agenda-processing-spinner {
width: 36px;
height: 36px;
}
i.fa-spinner,
i.fa.fa-spinner,
i.fas.fa-spinner,
i.fa-solid.fa-spinner {
display: inline-block !important;
width: 1em;
height: 1em;
min-width: 1em;
min-height: 1em;
line-height: 1;
vertical-align: middle;
color: transparent !important;
background: none !important;
border: 0 !important;
animation: none !important;
position: relative;
}
i.fa-spinner::before,
i.fa-spinner::after,
i.fa.fa-spinner::before,
i.fa.fa-spinner::after,
i.fas.fa-spinner::before,
i.fas.fa-spinner::after,
i.fa-solid.fa-spinner::before,
i.fa-solid.fa-spinner::after {
content: none !important;
display: none !important;
}
i.fa-spinner .ft-spinner-img,
i.fa.fa-spinner .ft-spinner-img,
i.fas.fa-spinner .ft-spinner-img,
i.fa-solid.fa-spinner .ft-spinner-img {
width: 1em;
height: 1em;
display: block;
background: none;
}
/* Estilo para �cone de atualiza��o quando h� nova vers�o */
#config-icon.update-available {
animation: spin 2s linear infinite;
color: #ff9800;
font-weight: bold;
}
/* ===================== MODAL MOVIMENTA��O DE ESTOQUE ===================== */
.movim-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,.72);
display: flex;
align-items: center;
justify-content: center;
z-index: 10050;
padding: 16px;
}
.movim-panel {
width: min(540px, 100%);
background: #1a1d27;
border: 1px solid rgba(113,119,144,.25);
border-radius: 22px;
padding: 24px;
display: flex;
flex-direction: column;
gap: 16px;
max-height: 92vh;
overflow-y: auto;
position: relative;
box-shadow: 0 18px 48px rgba(0,0,0,.55);
}
.movim-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
padding-bottom: 8px;
border-bottom: 1px solid rgba(113,119,144,.18);
}
.movim-header-info { display: flex; flex-direction: column; gap: 3px; }
.movim-titulo { font-size: 1.05rem; font-weight: 700; color: #f1f5f9; }
.movim-subtitulo { font-size: .8rem; color: #8ea0b8; }
.movim-close {
background: none;
border: none;
color: #9ca3af;
cursor: pointer;
padding: 4px 6px;
border-radius: 8px;
font-size: 16px;
transition: background .2s, color .2s;
}
.movim-close:hover { background: rgba(255,255,255,.08); color: #f1f5f9; }
/* Estoque + controles */
.movim-stock-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.movim-stock-badge {
flex: 1 1 160px;
font-size: 1.3rem;
font-weight: 700;
color: #fff;
background: rgba(13,110,253,.18);
border: 1px solid rgba(13,110,253,.45);
padding: 11px 16px;
border-radius: 14px;
letter-spacing: .01em;
}
.movim-stock-controls { display: flex; flex-wrap: wrap; gap: 8px; }
.movim-estoque-locais {
flex: 1 1 100%;
background: rgba(255,255,255,.04);
border: 1px solid #2f3545;
border-radius: 10px;
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 4px;
}
.movim-estoque-locais .movim-est-linha {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
font-size: .82rem;
color: #cbd5e1;
line-height: 1.45;
}
.movim-estoque-locais .movim-est-nome {
color: #94a3b8;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 72%;
}
.movim-estoque-locais .movim-est-qtd {
font-weight: 700;
white-space: nowrap;
color: #e2e8f0;
}
.movim-estoque-locais .movim-est-linha.movim-est-destaque .movim-est-nome,
.movim-estoque-locais .movim-est-linha.movim-est-destaque .movim-est-qtd {
color: #93c5fd;
}
.movim-estoque-vazio {
font-size: .78rem;
color: #64748b;
}
.movim-btn-hist {
padding: 10px 14px;
border-radius: 10px;
border: none;
background: #0d6efd;
color: #fff;
font-size: .9rem;
font-weight: 600;
cursor: pointer;
min-height: 40px;
transition: filter .2s;
}
.movim-btn-hist:hover { filter: brightness(1.1); }
.movim-btn-comp {
padding: 10px 14px;
border-radius: 10px;
border: none;
background: #136f63;
color: #fff;
font-size: .9rem;
font-weight: 600;
cursor: pointer;
min-height: 40px;
transition: filter .2s;
}
.movim-btn-comp:hover { filter: brightness(1.1); }
.movim-btn-print {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 14px;
border-radius: 10px;
border: 1px solid #ffd35c;
background: #ffb400;
color: #1b1b1b;
font-size: .9rem;
font-weight: 700;
cursor: pointer;
min-height: 40px;
transition: filter .2s;
}
.movim-btn-print:hover { filter: brightness(1.08); }
/* Local de estoque + tipo */
.movim-field { display: flex; flex-direction: column; gap: 6px; }
.movim-field label { font-size: .82rem; color: #9ca3af; }
.movim-field-label { font-size: .82rem; color: #9ca3af; }
.movim-field select,
.movim-field input,
.movim-field textarea {
padding: 10px;
border-radius: 10px;
border: 1px solid #2f3545;
background: #252833;
color: #f1f5f9;
font-size: .92rem;
}
.movim-field textarea { min-height: 60px; resize: vertical; }
/* Tipo de movimenta��o */
.movim-tipo { display: flex; gap: 10px; flex-wrap: wrap; }
.movim-modo-tipo { margin-top: 2px; margin-bottom: 4px; }
.movimModoBtn {
flex: 1;
min-width: 0;
min-height: 44px;
padding: 10px 8px;
border-radius: 10px;
border: 1px solid #3f4458;
background: #2a2d3a;
color: #e5e7eb;
cursor: pointer;
transition: background .15s, transform .1s;
font-size: .88rem;
font-weight: 700;
}
.movimModoBtn:hover { background: #333748; }
.movimModoBtn.ativo { transform: translateY(-1px); }
.movimModoBtn[data-type="ENTRADA"].ativo { background: #166b16; color: #fff; border-color: #1a7a1a; }
.movimModoBtn[data-type="SAIDA"].ativo { background: #8a2020; color: #fff; border-color: #9a2828; }
.movimModoBtn[data-type="TRANSFERENCIA"].ativo { background: #105c7a; color: #fff; border-color: #146b8a; }
.movimTipoBtn {
flex: 1;
padding: 12px;
border-radius: 12px;
border: none;
cursor: pointer;
background: #2a2d3a;
color: #d1d5db;
font-weight: 600;
font-size: .95rem;
min-height: 46px;
transition: background .2s, transform .15s;
}
.movimTipoBtn:hover { background: #333748; }
.movimTipoBtn.ativo { transform: translateY(-1px); }
.movimTipoBtn[data-type="ENTRADA"].ativo { background: #166b16; color: #fff; }
.movimTipoBtn[data-type="SAIDA"].ativo { background: #8a2020; color: #fff; }
.movimTipoBtn[data-type="TRANSFERENCIA"].ativo { background: #105c7a; color: #fff; }
.movimTipoBtn.processando { opacity: .65; cursor: wait; }
/* Impressora no modal movimentação */
.movim-impressora-row {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
padding: 10px 12px; margin-top: 4px;
background: rgba(15,23,42,.55); border: 1px solid rgba(51,65,85,.6);
border-radius: 10px;
}
.movim-impressora-row--modal { margin: 0 16px 12px; }
.movim-impressora-row label { color: #94a3b8; font-size: .8rem; white-space: nowrap; flex-shrink: 0; }
.movim-impr-icone { color: #a78bfa; font-size: .85rem; flex-shrink: 0; }
.movim-listbox-impressora {
flex: 1; min-width: 140px; background: #1e293b; color: #f1f5f9;
border: 1px solid #334155; border-radius: 7px;
padding: 7px 10px; font-size: .85rem; outline: none; cursor: pointer;
}
.movim-listbox-impressora:focus { border-color: #7c3aed; }
.movim-impr-btn-icon {
background: #1e293b; border: 1px solid #334155; border-radius: 7px;
color: #94a3b8; padding: 7px 10px; cursor: pointer; flex-shrink: 0;
}
.movim-impr-btn-icon:hover { color: #e2e8f0; border-color: #475569; }
/* Listbox postos — modal Gerar OP (Registrar produção) */
.producao-gerar-op-postos-select {
background: #1e293b;
color: #f1f5f9;
border: 1px solid #334155;
}
.producao-gerar-op-postos-select:focus { border-color: #10b981; }
.producao-gerar-op-postos-select option {
background-color: #1e293b;
color: #f1f5f9;
}
.producao-gerar-op-postos-select option:checked,
.producao-gerar-op-postos-select option:hover {
background-color: #334155;
color: #f8fafc;
}
/* Sub-modal impressão ETQ */
.movim-imp-overlay {
position: fixed; inset: 0; z-index: 10150;
background: rgba(0,0,0,.82); backdrop-filter: blur(6px);
display: flex; align-items: center; justify-content: center; padding: 16px;
}
.movim-imp-panel {
width: min(480px, 100%); background: #1a1d27;
border: 1px solid rgba(113,119,144,.28); border-radius: 18px;
overflow: hidden; box-shadow: 0 18px 48px rgba(0,0,0,.55);
}
.movim-imp-header {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 18px; border-bottom: 1px solid rgba(113,119,144,.22);
background: rgba(15,23,42,.72);
}
.movim-imp-title-wrap { display: flex; align-items: center; gap: 10px; }
.movim-imp-title-wrap > i { color: #a78bfa; font-size: 1.1rem; }
.movim-imp-titulo { display: block; font-weight: 700; color: #f1f5f9; font-size: 1rem; }
.movim-imp-subtitulo { display: block; font-size: .78rem; color: #94a3b8; margin-top: 2px; }
.movim-imp-status { padding: 8px 16px; font-size: .85rem; color: #94a3b8; min-height: 28px; }
.movim-imp-status.erro { color: #f87171; }
.movim-imp-status.ok { color: #4ade80; }
.movim-imp-etq-wrap, .movim-imp-qtd-row {
padding: 0 16px 12px; display: flex; flex-direction: column; gap: 6px;
}
.movim-imp-etq-wrap label, .movim-imp-qtd-row label { color: #94a3b8; font-size: .82rem; font-weight: 600; }
.movim-imp-etq-wrap select, .movim-imp-qtd-row input {
background: #0f172a; border: 1px solid #334155; border-radius: 8px;
padding: 10px 12px; color: #f1f5f9; font-size: .92rem; width: 100%; box-sizing: border-box;
}
.movim-imp-footer {
display: flex; justify-content: flex-end; gap: 10px;
padding: 12px 16px 16px; border-top: 1px solid rgba(113,119,144,.18);
}
.movim-imp-btn-confirmar {
background: linear-gradient(135deg, #7c3aed, #6366f1); color: #fff; border: none;
border-radius: 10px; padding: 10px 18px; font-weight: 700; cursor: pointer;
display: inline-flex; align-items: center; gap: 8px; font-size: .92rem;
}
.movim-imp-btn-cancelar {
background: #2a2d3a; color: #d1d5db; border: 1px solid #3f4454;
border-radius: 10px; padding: 10px 16px; cursor: pointer; font-size: .92rem;
}
.movim-scan-overlay {
position: fixed; inset: 0; z-index: 10250;
background: rgba(0,0,0,.88); backdrop-filter: blur(6px);
display: flex; align-items: center; justify-content: center; padding: 16px;
}
.movim-scan-panel {
width: min(460px, 92vw); background: #1e293b; border: 1px solid #334155;
border-radius: 14px; overflow: hidden; box-shadow: 0 24px 64px rgba(0,0,0,.6);
}
.movim-scan-header {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 18px; background: #0f172a; border-bottom: 1px solid #334155;
}
.movim-scan-title-wrap { display: flex; align-items: center; gap: 8px; color: #f1f5f9; font-weight: 700; }
.movim-scan-title-wrap i { color: #34d399; }
.movim-scan-viewport { position: relative; background: #000; width: 100%; aspect-ratio: 4/3; overflow: hidden; }
.movim-scan-viewport video { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
.movim-scan-mira-wrap {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.movim-scan-mira {
width: min(88%, 320px); height: 88px; border: 3px solid rgba(52,211,153,.85); border-radius: 8px;
box-shadow: 0 0 0 3000px rgba(0,0,0,.38); transition: border-color .3s, width .25s, height .25s, border-radius .25s;
}
.movim-scan-status { padding: 12px 18px; font-size: .88rem; color: #94a3b8; min-height: 44px; text-align: center; }
.movim-scan-manual { padding: 2px 18px 16px; display: flex; gap: 8px; }
.movim-scan-manual input {
flex: 1; background: #0f172a; border: 1px solid #334155; border-radius: 8px;
padding: 9px 12px; color: #f1f5f9; font-size: .9rem;
}
/* Histórico de ajustes Omie (modal movimentação) */
.movim-hist-overlay {
position: fixed; inset: 0; z-index: 10100;
background: rgba(0,0,0,.82); backdrop-filter: blur(6px);
display: flex; align-items: center; justify-content: center; padding: 16px;
}
.movim-hist-panel {
width: min(1040px, 100%);
max-height: 88vh;
background: #1a1d27;
border: 1px solid rgba(113,119,144,.28);
border-radius: 18px;
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: 0 18px 48px rgba(0,0,0,.55);
}
.movim-hist-header {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 12px; padding: 16px 18px; border-bottom: 1px solid rgba(113,119,144,.2);
}
.movim-hist-title-wrap { display: flex; align-items: flex-start; gap: 10px; color: #f1f5f9; }
.movim-hist-title-wrap i { color: #60a5fa; margin-top: 3px; }
.movim-hist-titulo { display: block; font-size: 1rem; font-weight: 700; }
.movim-hist-subtitulo { display: block; font-size: .78rem; color: #8ea0b8; margin-top: 2px; }
.movim-hist-status {
padding: 10px 18px; font-size: .84rem; color: #94a3b8;
border-bottom: 1px solid rgba(113,119,144,.14);
}
.movim-hist-status.erro { color: #f87171; }
.movim-hist-body {
flex: 1; min-height: 120px; overflow: auto; padding: 12px 14px 16px;
}
.movim-hist-vazio {
color: #6b7280; font-size: .9rem; text-align: center; padding: 28px 12px;
}
.movim-hist-table {
width: 100%; border-collapse: collapse; font-size: .8rem;
}
.movim-hist-table th,
.movim-hist-table td {
padding: 8px 10px; border-bottom: 1px solid rgba(71,85,105,.45);
text-align: left; vertical-align: top;
}
.movim-hist-table th {
color: #9ca3af; font-weight: 600; position: sticky; top: 0;
background: #1a1d27; z-index: 1;
}
.movim-hist-table td { color: #e2e8f0; }
.movim-hist-tipo-ent { color: #4ade80; font-weight: 700; }
.movim-hist-tipo-sai { color: #f87171; font-weight: 700; }
.movim-hist-tipo-trf { color: #60a5fa; font-weight: 700; }
.movim-hist-saldo { color: #fbbf24; font-weight: 600; white-space: nowrap; }
.movim-hist-obs { color: #94a3b8; max-width: 220px; word-break: break-word; }
.movim-mesmo-arm-aviso {
font-size: .78rem;
color: #9ca3af;
background: transparent;
border: none;
border-radius: 0;
padding: 0 0 4px;
line-height: 1.35;
}
.movim-imprimir-wrap {
display: flex; align-items: center; gap: 8px; font-size: .84rem; color: #cbd5e1;
cursor: pointer; user-select: none;
}
.movim-imprimir-wrap input[type="checkbox"] {
width: 18px;
height: 18px;
min-width: 18px;
min-height: 18px;
max-width: 18px;
max-height: 18px;
flex: 0 0 18px;
margin: 0;
}
.movim-imprimir-wrap input { accent-color: #6366f1; }
.movim-executar-btn {
display: none;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 12px;
border: none;
border-radius: 12px;
background: #4f46e5;
color: #fff;
font-weight: 700;
font-size: .95rem;
cursor: pointer;
margin-top: 4px;
transition: filter .2s;
}
.movim-executar-btn:hover { filter: brightness(1.08); }
.movim-executar-btn:disabled,
.movim-executar-btn.processando { opacity: .65; cursor: wait; }
.movim-scan-manual button {
background: #059669; color: #fff; border: none; border-radius: 8px;
padding: 9px 16px; font-weight: 700; cursor: pointer;
}
/* Operadores quantidade */
#movimQtdResultado { min-height: 20px; font-size: .88rem; color: #7bfa8b; text-align: right; }
#movimOperadores { display: flex; gap: 8px; }
#movimOperadores button {
flex: 1;
padding: 9px;
border: none;
border-radius: 10px;
background: #2a2d3a;
color: #fff;
font-size: 1rem;
cursor: pointer;
transition: background .2s;
}
#movimOperadores button:hover { background: #373b4d; }
/* Mensagem */
.movim-mensagem { min-height: 22px; font-size: .88rem; }
.movim-mensagem.ok { color: #7bfa8b; }
.movim-mensagem.erro { color: #ff7373; }
.movim-mensagem.info { color: #93c5fd; }
/* Endere�os */
.movim-enderecos {
display: flex;
flex-direction: column;
gap: 10px;
padding: 14px;
background: #22253299;
border-radius: 14px;
border: 1px solid #2f3545;
}
.movim-enderecos-header {
display: flex;
align-items: center;
justify-content: space-between;
}
.movim-enderecos-header h4 { margin: 0; font-size: .93rem; color: #d1d5db; }
.movim-endereco-add {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 12px;
border-radius: 10px;
border: 1px solid #2f3545;
background: #2a2d3a;
color: #d1d5db;
font-size: .82rem;
font-weight: 600;
cursor: pointer;
transition: background .2s;
}
.movim-endereco-add:hover { background: #333748; }
.movim-endereco-vazio { font-size: .85rem; color: #6b7280; }
.movim-endereco-interno { display: flex; flex-direction: column; gap: 10px; }
.movim-endereco-campo {
padding: 10px 12px;
background: #1a1f2e;
border: 1px solid #2f3545;
border-radius: 10px;
}
.movim-endereco-campo-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 8px;
}
.movim-endereco-campo-label {
font-size: .72rem;
font-weight: 700;
color: #fbbf24;
text-transform: uppercase;
letter-spacing: .04em;
}
.movim-endereco-valor {
font-size: .84rem;
font-weight: 700;
color: #fde68a;
word-break: break-word;
line-height: 1.45;
padding: 6px 8px;
background: #141820;
border-radius: 8px;
border: 1px dashed #854d0e55;
}
.movim-endereco-valor.vazio { color: #6b7280; font-weight: 500; border-style: dotted; }
.movim-scan-origem { border-color: #7f1d1d; color: #fecaca; }
.movim-scan-destino { border-color: #166534; color: #bbf7d0; }
.movim-endereco-referencia-pp:empty { display: none; }
.movim-etq-linha--selected { background: rgba(59, 130, 246, .12); outline: 1px solid rgba(59, 130, 246, .35); }
.movim-etq-linha--origem { box-shadow: inset 3px 0 0 #f59e0b; }
.movim-etq-linha--destino { box-shadow: inset 3px 0 0 #22c55e; }
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 8px;
}
.movim-endereco-etq-lista:empty { display: none; }
.movim-ref-loading { font-size: .82rem; color: #6b7280; }
.movim-ref-erro { font-size: .82rem; color: #f87171; line-height: 1.4; }
.movim-etq-linha {
display: grid;
grid-template-columns: minmax(100px, 1.4fr) repeat(3, minmax(44px, auto)) minmax(60px, 1fr) 36px;
align-items: center;
gap: 8px 12px;
padding: 10px 12px;
background: #1a2332;
border: 1px solid #334155;
border-radius: 10px;
font-size: .78rem;
line-height: 1.35;
cursor: pointer;
transition: border-color .15s, background .15s, box-shadow .15s;
}
.movim-etq-linha:not(.movim-etq-linha--head):hover {
border-color: #64748b;
background: #1e293b;
}
.movim-etq-linha--selected {
border-color: #6366f1 !important;
background: #1e1b4b !important;
box-shadow: 0 0 0 1px rgba(99, 102, 241, .45);
}
.movim-etq-linha--head {
cursor: default;
background: #0f172a;
border-color: #475569;
font-size: .68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
color: #94a3b8;
padding: 8px 12px;
}
.movim-etq-linha--head:hover { background: #0f172a; border-color: #475569; }
.movim-etq-btn-print {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
border: 1px solid #475569;
border-radius: 8px;
background: #0f172a;
color: #a78bfa;
cursor: pointer;
flex-shrink: 0;
transition: background .15s, color .15s, border-color .15s;
}
.movim-etq-btn-print:hover:not(:disabled) {
background: #312e81;
border-color: #6366f1;
color: #e9d5ff;
}
.movim-etq-btn-print:disabled { opacity: .55; cursor: wait; }
.movim-etq-linha--head .movim-etq-end { color: #94a3b8; font-weight: 700; }
.movim-etq-end {
color: #fde68a;
font-weight: 700;
word-break: break-word;
}
.movim-etq-meta {
color: #cbd5e1;
font-weight: 600;
white-space: nowrap;
}
.movim-etq-meta--comp {
color: #94a3b8;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 140px;
}
.movim-etq-meta--vazio { color: #475569; }
/* A��es */
.movim-acoes { display: flex; gap: 12px; margin-top: 4px; }
.movim-retorno-omie {
margin-top: 4px;
padding: 12px 14px;
border-radius: 12px;
font-size: .86rem;
line-height: 1.45;
border: 1px solid #374151;
background: #141820;
}
.movim-retorno-omie.ok {
border-color: rgba(34,197,94,.45);
background: rgba(22,163,74,.12);
color: #bbf7d0;
}
.movim-retorno-omie.erro {
border-color: rgba(248,113,113,.45);
background: rgba(239,68,68,.12);
color: #fecaca;
}
.movim-retorno-omie.info {
border-color: rgba(147,197,253,.35);
background: rgba(59,130,246,.10);
color: #bfdbfe;
}
.movim-retorno-titulo { font-weight: 700; font-size: .92rem; margin-bottom: 6px; }
.movim-retorno-id { font-size: .78rem; opacity: .85; margin-bottom: 6px; }
.movim-retorno-linha { font-size: .84rem; }
.movim-acoes button {
flex: 1;
padding: 12px;
border-radius: 12px;
border: none;
cursor: pointer;
font-weight: 600;
font-size: .95rem;
transition: filter .2s;
}
#movimCancelarBtn { background: #2a2d3a; color: #d1d5db; }
#movimCancelarBtn:hover { filter: brightness(1.1); }
#movimSalvarBtn { background: #4f46e5; color: #fff; }
#movimSalvarBtn:hover { filter: brightness(1.1); }
/* Media queries responsividade modal movimenta��o */
@media (max-width: 480px) {
.movim-panel {
padding: 16px 14px;
border-radius: 16px;
gap: 12px;
}
.movim-titulo { font-size: .92rem; }
.movim-stock-badge { font-size: 1.1rem; padding: 9px 12px; flex: 1 1 100%; }
.movim-stock-controls { width: 100%; }
.movim-btn-hist, .movim-btn-comp, .movim-btn-print {
padding: 8px 10px; font-size: .8rem; min-height: 38px; flex: 1;
}
.movimTipoBtn { font-size: .8rem; padding: 10px 4px; min-height: 42px; }
.movim-acoes button { padding: 11px; font-size: .88rem; }
#movimOperadores button { padding: 8px; }
}
@media (max-width: 360px) {
.movimTipoBtn[data-type="TRANSFERENCIA"] { font-size: .72rem; padding: 10px 2px; }
}
/* ===================== FIM MODAL MOVIMENTA��O ===================== */
/* ===================== PALLET PICKER ===================== */
.ppicker-panel {
background: #12151f;
border: 1px solid #2d3748;
border-radius: clamp(12px, 3vw, 18px);
padding: clamp(14px, 4vw, 22px);
max-width: 500px;
width: min(500px, 95vw);
color: white;
font-family: inherit;
}
.ppicker-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 20px;
}
.ppicker-header-left { display: flex; flex-direction: column; gap: 6px; }
.ppicker-titulo { font-size: 15px; font-weight: 700; color: #e2e8f0; }
.ppicker-voltar {
background: none; border: none; color: #60a5fa; font-size: 12px;
cursor: pointer; padding: 0; display: flex; align-items: center; gap: 5px; font-family: inherit;
}
.ppicker-fechar {
background: #1e2535; border: 1px solid #374151; color: #9ca3af;
width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
font-size: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
/* SIDE VIEW */
.ppicker-side-view {
display: flex; gap: clamp(5px, 2vw, 10px); justify-content: center;
padding: clamp(6px, 2vw, 10px) 0 clamp(12px, 4vw, 24px);
flex-wrap: nowrap;
}
.ppicker-col-wrap {
display: flex; flex-direction: column; align-items: center;
gap: 0; cursor: pointer;
}
.ppicker-col-body {
width: clamp(40px, 12vw, 56px);
height: clamp(120px, 36vw, 168px);
background: linear-gradient(160deg, #1e2d40 0%, #162030 100%);
border: 2px solid #2e4a6a;
border-radius: 3px 3px 0 0;
position: relative;
display: flex; flex-direction: column;
padding: 5px 5px 5px;
transition: all 0.2s;
box-shadow: -6px 5px 0 #0a1018, 0 4px 16px rgba(0,0,0,0.5);
}
.ppicker-col-body::after {
content: '';
position: absolute;
top: -8px; left: -6px; right: -2px; height: 8px;
background: #2a4a6e;
border: 1px solid #3a6a9e;
border-bottom: none;
transform: skewX(-45deg);
transform-origin: bottom left;
}
.ppicker-col-wrap:hover .ppicker-col-body {
border-color: #60a5fa;
background: linear-gradient(160deg, #1e3a5f 0%, #162a45 100%);
box-shadow: -6px 5px 0 #0a1018, 0 0 20px rgba(96,165,250,0.3);
transform: translateY(-5px);
}
.ppicker-shelf-space { flex: 1; }
.ppicker-shelf-line {
height: 3px;
background: linear-gradient(90deg, #3a7acc, #60a5fa);
border-radius: 2px; margin: 0 1px;
box-shadow: 0 0 4px rgba(96,165,250,0.3);
}
.ppicker-col-floor-strip {
width: clamp(40px, 12vw, 56px);
height: 7px;
background: #1a3a5c;
border: 1px solid #2e4a6a; border-top: 2px solid #3a7acc;
border-radius: 0 0 3px 3px;
}
.ppicker-col-label {
font-size: 11px; color: #9ca3af; font-weight: 700;
letter-spacing: 1px; margin-top: 7px;
}
/* FRONT VIEW */
.ppicker-front-view { padding: 4px 0 8px; }
.ppicker-front-bays-header {
display: grid; grid-template-columns: 1fr 1fr;
gap: 10px; margin-bottom: 8px; padding: 0 2px;
}
.ppicker-front-bays-header div {
text-align: center; font-size: 11px; color: #60a5fa;
font-weight: 700; padding: 5px; background: #1a2535;
border-radius: 6px; letter-spacing: 0.5px;
}
.ppicker-front-row {
display: grid; grid-template-columns: 1fr 1fr;
gap: 10px; margin-bottom: 8px; padding: 0 2px;
}
.ppicker-front-cell {
background: linear-gradient(160deg, #1e2d40 0%, #162030 100%);
border: 2px solid #2e4a6a;
border-radius: 8px;
padding: clamp(12px, 4vw, 18px) clamp(6px, 2vw, 8px);
text-align: center; font-size: clamp(11px, 3vw, 13px); font-weight: 700;
color: #93c5fd; cursor: pointer;
transition: all 0.15s;
box-shadow: 0 3px 0 #0a1018, 0 4px 8px rgba(0,0,0,0.3);
}
.ppicker-front-cell:hover {
background: linear-gradient(160deg, #1e3a5f 0%, #162a45 100%);
border-color: #60a5fa; color: white;
transform: translateY(-3px);
box-shadow: 0 6px 0 #0a1018, 0 8px 16px rgba(96,165,250,0.25);
}
.ppicker-front-cell:active { transform: translateY(0); box-shadow: 0 1px 0 #0a1018; }
.ppicker-front-floor-label {
text-align: center; font-size: 10px; font-weight: 700;
color: #374151; letter-spacing: 4px; margin-top: 6px;
}
/* Itens de endere�o no modal movimenta��o */
.movim-endereco-item {
display: flex; justify-content: space-between; align-items: center;
background: #1a2535; border: 1px solid #2e4a6a;
border-radius: 8px; padding: 7px 12px; margin-bottom: 6px;
font-size: 12px; font-weight: 700; color: #93c5fd;
}
.movim-endereco-item button {
background: none; border: none; color: #ef4444;
cursor: pointer; font-size: 13px; padding: 2px 4px; line-height: 1;
}
/* Media queries responsividade pallet picker */
@media (max-width: 400px) {
.ppicker-col-label { font-size: 9px; letter-spacing: 0; margin-top: 4px; }
.ppicker-titulo { font-size: 13px; }
.ppicker-front-bays-header div { font-size: 10px; padding: 4px; }
}
/* ===================== FIM PALLET PICKER ===================== */
/* ================================================================
������ MODO ESCURO/CLARO � Overrides completos
Garante que TODAS as se��es se adaptem corretamente ao tema.
================================================================ */
/* ----------------------------------------------------------------
1. MODO ESCURO � Se��es com cores claras hardcoded
---------------------------------------------------------------- */
/* --- Detalhes de Pedido --- */
:root:not(.light-mode) .detalhes-wrapper {
background-color: #1e293b;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
:root:not(.light-mode) .campo-detalhe {
background-color: #0f172a;
border-color: #334155;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
:root:not(.light-mode) .campo-detalhe .label-detalhe {
color: #94a3b8;
}
:root:not(.light-mode) .campo-detalhe .valor-detalhe {
color: #e2e8f0;
}
:root:not(.light-mode) .tabela-detalhes {
background-color: #0f172a;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
:root:not(.light-mode) .tabela-detalhes td {
color: #e2e8f0;
border-bottom-color: #334155;
}
:root:not(.light-mode) .tabela-detalhes tbody tr {
background-color: #0f172a;
}
:root:not(.light-mode) .tabela-detalhes tbody tr:nth-child(even) {
background-color: #1e293b;
}
:root:not(.light-mode) .tabela-detalhes tbody tr:hover {
background-color: #334155;
}
:root:not(.light-mode) .loading-details,
:root:not(.light-mode) .fault-message {
background-color: #0f172a;
color: #94a3b8;
border-color: #334155;
}
:root:not(.light-mode) .fault-message {
color: #fca5a5;
background-color: rgba(127, 29, 29, 0.2);
border-color: #7f1d1d;
}
/* --- Modal Geral --- */
:root:not(.light-mode) .modal-content {
background: #1e293b !important;
color: #e2e8f0 !important;
box-shadow: 0 6px 18px rgba(0,0,0,0.5);
}
:root:not(.light-mode) .etiquetas-list li {
border-bottom-color: #334155;
}
:root:not(.light-mode) .etiquetas-list li span,
:root:not(.light-mode) .modal-content span {
color: #e2e8f0 !important;
}
/* --- Auth Popup (Login) � mant�m visual original (fundo branco) em ambos os modos --- */
/* --- Compras: Tabela (dark) --- */
:root:not(.light-mode) #listaMinhasSolicitacoes table {
background: #111827;
}
:root:not(.light-mode) #listaMinhasSolicitacoes #listaMinhasSolicitacoesTabela > thead > tr {
background: #111827 !important;
}
/* --- Loading bar --- */
:root:not(.light-mode) .loading-bar {
background: #334155;
}
/* --- Icon inline btn --- */
:root:not(.light-mode) .icon-inline-btn {
color: #e2e8f0;
}
/* --- Btn secondary no dark --- */
:root:not(.light-mode) .btn-secondary:hover {
border-color: #e2e8f0;
color: #e2e8f0;
}
/* ----------------------------------------------------------------
2. MODO CLARO � Se��es com cores escuras hardcoded
---------------------------------------------------------------- */
/* --- Tabelas Armaz�ns --- */
.light-mode table.tabela {
color: #1f2937;
}
.light-mode table.tabela thead {
background: #f3f4f6;
color: #374151;
}
.light-mode table.tabela th,
.light-mode table.tabela td {
border-color: #e5e7eb;
}
.light-mode table.tabela th.sortable:hover {
background: #e5e7eb;
}
.light-mode table.tabela tbody tr {
background: #ffffff;
}
.light-mode table.tabela tbody tr:nth-child(even) {
background: #f9fafb;
}
.light-mode table.tabela tbody tr:hover {
background: #e5e7eb;
}
.light-mode .almox-wrapper thead th {
background: #f3f4f6;
color: #374151;
}
.light-mode .almox-wrapper tbody tr:active {
background: #e5e7eb;
}
.light-mode .almox-pager .btn.tiny {
background: #f3f4f6;
border-color: #d1d5db;
color: #1f2937;
}
.light-mode .producao-wrapper thead th {
background: #f3f4f6;
color: #374151;
}
/* --- Busca e Filtros --- */
.light-mode .search-box {
background: #ffffff;
border-color: #d1d5db;
color: #1f2937;
}
.light-mode .search-box::placeholder {
color: #9ca3af;
}
.light-mode .cmc-total {
color: #6b7280;
}
.light-mode .filter-icon {
color: #6b7280;
}
.light-mode .filter-icon:hover {
color: #1f2937;
}
.light-mode .filter-panel {
background: #ffffff;
border-color: #d1d5db;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
color: #1f2937;
}
.light-mode .clear-icon {
color: #9ca3af;
}
.light-mode .clear-icon:hover {
color: #1f2937;
}
/* --- Transfer�ncias --- */
.light-mode .transfer-search-dropdown {
background: #ffffff;
border-color: #e5e7eb;
box-shadow: 0 10px 22px rgba(0,0,0,0.1);
}
.light-mode .transfer-search-results li {
color: #1f2937;
border-bottom-color: #f3f4f6;
}
.light-mode .transfer-search-results li:hover {
background: #f3f4f6;
}
.light-mode .transfer-search-results li.info,
.light-mode .transfer-search-results li.no-results {
background: #f9fafb;
color: #6b7280;
}
.light-mode .transfer-search-results li.error {
background: #fef2f2;
color: #b91c1c;
}
.light-mode .transfer-select {
background: #ffffff;
border-color: #d1d5db;
color: #1f2937;
}
.light-mode .transferencia-locais label {
color: #374151;
}
.light-mode .transferencia-table td.qtd-cell input.transfer-qtd {
background: #ffffff;
border-color: #d1d5db;
color: #1f2937;
}
.light-mode .transferencia-wrapper .transferencia-placeholder {
color: #6b7280;
}
.light-mode .transfer-endereco-results {
background: #ffffff;
}
.light-mode .transfer-details-wrapper {
background: #ffffff;
}
/* --- Tab Content / Tab Pane --- */
.light-mode .tab-content {
background: #ffffff;
}
.light-mode .tab-pane {
background: #ffffff;
}
.light-mode .tab-pane-fixed {
background: #f3f4f6;
}
.light-mode .btn-tab-fixed,
.light-mode .btn-tab-fixed-v2 {
background: #f3f4f6;
color: #1f2937;
border-color: #d1d5db;
}
.light-mode .tab-pane-wrapper {
background: #ffffff;
}
/* --- PIR Selects --- */
.light-mode #pirFrequencia,
.light-mode #editPirFrequencia {
background: #ffffff;
color: #1f2937;
border: 1px solid #d1d5db;
}
.light-mode #pirFrequencia option,
.light-mode #editPirFrequencia option {
background: #ffffff;
color: #1f2937;
}
/* --- Chat --- */
.light-mode .chat-messages {
background: #f3f4f6;
}
.light-mode .chat-message-received {
background: #e5e7eb;
color: #1f2937;
}
.light-mode .chat-message-time {
color: #6b7280;
}
.light-mode #chatText {
background: #ffffff;
color: #1f2937;
border: 1px solid #d1d5db;
}
.light-mode #chatText:disabled {
background: #f3f4f6;
color: #9ca3af;
}
.light-mode #chatSend:disabled {
background: #e5e7eb;
color: #9ca3af;
}
.light-mode .chat-user-item {
border-bottom-color: #e5e7eb;
}
.light-mode .chat-user-item:hover {
background: rgba(16, 185, 129, 0.08);
}
.light-mode .chat-user-item.is-active {
background: rgba(16, 185, 129, 0.1);
}
/* --- Kanban Colunas --- */
.light-mode .kanban-column {
background: rgba(255,255,255,0.95);
border-color: #e5e7eb;
color: #1f2937;
}
.light-mode .kanban-header {
background: #f3f4f6;
border-bottom-color: #e5e7eb;
color: #1f2937;
}
.light-mode .kanban-list li:not(.placeholder) {
background: #ffffff;
border-color: #e5e7eb;
color: #1f2937;
}
.light-mode .kanban-list li:not(.placeholder):hover {
background: #f9fafb;
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.light-mode .kanban-card-header {
color: #1f2937;
}
.light-mode .kanban-card-items li {
color: #374151;
}
.light-mode .kanban-list::-webkit-scrollbar-thumb {
background: rgba(0,0,0,0.2);
}
.light-mode .kanban-list li.placeholder {
border-color: rgba(0,0,0,0.15);
}
/* --- Kanban Modal --- */
.light-mode .kanban-modal-overlay {
background: rgba(107,114,128,0.4);
}
.light-mode .kanban-modal {
background: #ffffff;
border-color: #e5e7eb;
box-shadow: 0 25px 60px rgba(0,0,0,0.15);
}
.light-mode .kanban-modal header {
border-bottom-color: #e5e7eb;
}
.light-mode .kanban-modal header h2 {
color: #1f2937;
}
.light-mode .kanban-modal header span {
color: #0284c7;
}
.light-mode .kanban-modal .close-btn {
color: #6b7280;
}
.light-mode .kanban-modal .close-btn:hover {
color: #1f2937;
}
.light-mode .kanban-modal-body .modal-code-block {
background: rgba(16, 185, 129, 0.06);
border-color: rgba(16, 185, 129, 0.2);
}
.light-mode .modal-code-header {
color: #059669;
}
.light-mode .modal-orders label {
color: #0284c7;
}
.light-mode .modal-orders select {
background: #f9fafb;
border-color: #d1d5db;
color: #1f2937;
}
.light-mode .op-row {
background: #f9fafb;
}
.light-mode .op-row strong {
color: #1f2937;
}
.light-mode .op-row input[type="date"],
.light-mode .op-row input[type="time"] {
background: #ffffff;
border-color: #d1d5db;
color: #1f2937;
}
.light-mode .modal-secondary {
background: rgba(107, 114, 128, 0.1);
color: #374151;
}
.light-mode .modal-primary {
color: #ffffff;
}
.light-mode .kanban-modal footer {
border-top-color: #e5e7eb;
}
/* --- Kanban Card meta e bot�es --- */
.light-mode .kanban-card .kanban-op-list {
color: #374151;
}
.light-mode .kanban-card .kanban-modal-trigger {
background: rgba(0, 0, 0, 0.06);
color: #1f2937;
}
.light-mode .kanban-card .kanban-modal-trigger:hover {
background: rgba(0, 0, 0, 0.1);
}
.light-mode .kanban-stock-trigger {
border-color: #d1d5db;
background: rgba(249, 250, 251, 0.8);
color: #374151;
}
.light-mode .kanban-toggle-icon {
color: rgba(0, 0, 0, 0.4);
}
.light-mode .kanban-code-location {
background: rgba(0, 0, 0, 0.06);
}
.light-mode .kanban-code-header:hover {
background-color: rgba(0, 0, 0, 0.04);
}
/* --- Coluna Comercial (Kanban) --- */
.light-mode #coluna-comercial .kanban-card {
background: linear-gradient(145deg, rgba(99,102,241,0.06), rgba(129,140,248,0.03));
border-color: rgba(129,140,248,0.2);
box-shadow: 0 4px 12px rgba(99,102,241,0.06);
}
.light-mode #coluna-comercial .kanban-card .kanban-card-meta {
color: #4338ca !important;
}
/* --- Coluna PCP (Kanban) --- */
.light-mode #coluna-pcp-aprovado .kanban-card .kanban-card-meta {
color: #0284c7 !important;
}
.light-mode #coluna-pcp-op .kanban-card .kanban-card-meta {
color: #059669 !important;
}
.light-mode #coluna-pcp-aprovado .kanban-card .kanban-op-list,
.light-mode #coluna-pcp-op .kanban-card .kanban-op-list {
color: #374151;
}
.light-mode #coluna-pcp-aprovado .kanban-card .kanban-code-header {
color: #1f2937;
}
.light-mode #coluna-pcp-aprovado .kanban-card .kanban-code-count {
background: rgba(34, 197, 94, 0.1);
color: #059669;
}
.light-mode .excluded-op-line {
background: rgba(0,0,0,0.03);
}
.light-mode .op-reativar {
background: rgba(34, 197, 94, 0.1);
border-color: rgba(34, 197, 94, 0.3);
color: #059669;
}
.light-mode .kanban-header .kanban-icon-btn {
color: #6b7280;
}
.light-mode .kanban-header .kanban-icon-btn:hover {
background: rgba(0,0,0,0.06);
color: #d97706;
}
/* --- Kanban Programacao: reforco de contraste no modo claro --- */
.light-mode #coluna-pcp-aprovado .kanban-card {
background: linear-gradient(145deg, #e0edff 0%, #cfe2ff 100%);
border-color: #93c5fd;
box-shadow: 0 6px 14px rgba(59, 130, 246, 0.18);
}
.light-mode #coluna-pcp-op .kanban-card {
background: linear-gradient(145deg, #dcfce7 0%, #ccfbf1 100%);
border-color: #6ee7b7;
box-shadow: 0 6px 14px rgba(16, 185, 129, 0.16);
}
.light-mode #coluna-pcp-aprovado .kanban-card.kanban-card-local:hover,
.light-mode #coluna-pcp-op .kanban-card.kanban-card-production:hover {
box-shadow: 0 10px 22px rgba(30, 64, 175, 0.2);
}
.light-mode #coluna-pcp-aprovado .kanban-card .kanban-code-header,
.light-mode #coluna-pcp-op .kanban-card .kanban-code-header,
.light-mode #coluna-comercial .kanban-card .kanban-code-header {
color: #1f2937;
}
.light-mode #coluna-pcp-aprovado .kanban-card .kanban-code-count,
.light-mode #coluna-pcp-op .kanban-card .kanban-code-count,
.light-mode #coluna-comercial .kanban-card .kanban-code-count {
background: rgba(59, 130, 246, 0.16);
color: #1e3a8a;
}
.light-mode #coluna-comercial .kanban-card .kanban-op-list,
.light-mode #coluna-pcp-aprovado .kanban-card .kanban-op-list,
.light-mode #coluna-pcp-op .kanban-card .kanban-op-list {
color: #374151;
}
.light-mode #coluna-pcp-op .kanban-card .kanban-op-date {
color: #0f766e;
}
/* --- Kanban Minhas Compras: colunas e cards menos esmaecidos no modo claro --- */
.light-mode .kanban-column-minhas {
opacity: 1 !important;
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1) !important;
}
.light-mode .kanban-column-minhas .kanban-cards-minhas > .kanban-card {
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12) !important;
}
/* --- Qualidade --- */
.light-mode .qualidade-nfe-input {
background: #ffffff;
border-color: #d1d5db;
color: #1f2937;
box-shadow: inset 0 0 0 1px rgba(209, 213, 219, 0.3);
}
.light-mode #qualidadeCarretelImagemPlaceholder .options .option {
background-color: #f3f4f6;
}
.light-mode #qualidadeCarretelImagemPlaceholder .qualidade-pir-img-wrap {
border-color: #d1d5db;
background: #f3f4f6;
}
.light-mode #qualidadeCarretelImagemPlaceholder .qualidade-pir-img {
background: #f3f4f6;
}
.light-mode #qualidadeCarretelImagemPlaceholder .qualidade-pir-frequencia-badge {
background: rgba(255, 255, 255, 0.9);
border-color: #d1d5db;
color: #374151;
}
.light-mode #qualidadeCarretelImagemPlaceholder .qualidade-pir-oque-box {
background: #f9fafb;
border-color: #e5e7eb;
}
.light-mode #qualidadeCarretelImagemPlaceholder .qualidade-pir-oque-title {
color: #374151;
}
.light-mode #qualidadeCarretelImagemPlaceholder .qualidade-pir-oque-text {
color: #1f2937;
}
/* --- Foto Gest�o Modal --- */
.light-mode .foto-gestao-modal .fg-content {
background: #ffffff;
color: #1f2937;
border-color: #e5e7eb;
}
.light-mode .foto-gestao-modal .fg-header {
background: #f9fafb;
border-bottom-color: #e5e7eb;
}
.light-mode .foto-gestao-modal .fg-close {
color: #6b7280;
}
.light-mode .fg-card {
background: #f9fafb;
border-color: #e5e7eb;
}
.light-mode .fg-card img {
background: #f3f4f6;
}
.light-mode .fg-meta {
color: #6b7280;
}
.light-mode .fg-actions .primary {
color: #ffffff;
}
.light-mode .fg-actions .secondary {
background: #f3f4f6;
color: #1f2937;
border-color: #e5e7eb;
}
/* --- Pallet Picker --- */
.light-mode .ppicker-titulo {
color: #1f2937;
}
.light-mode .ppicker-voltar {
color: #2563eb;
}
.light-mode .ppicker-fechar {
background: #f3f4f6;
border-color: #d1d5db;
color: #6b7280;
}
.light-mode .ppicker-col-body {
background: linear-gradient(160deg, #dbeafe 0%, #bfdbfe 100%);
border-color: #60a5fa;
box-shadow: -6px 5px 0 #bfdbfe, 0 4px 16px rgba(0,0,0,0.08);
}
.light-mode .ppicker-col-body::after {
background: #93c5fd;
border-color: #60a5fa;
}
.light-mode .ppicker-col-wrap:hover .ppicker-col-body {
border-color: #3b82f6;
background: linear-gradient(160deg, #bfdbfe 0%, #93c5fd 100%);
box-shadow: -6px 5px 0 #bfdbfe, 0 0 20px rgba(59, 130, 246, 0.2);
}
.light-mode .ppicker-shelf-line {
background: linear-gradient(90deg, #3b82f6, #60a5fa);
}
.light-mode .ppicker-col-floor-strip {
background: #dbeafe;
border-color: #60a5fa;
border-top-color: #3b82f6;
}
.light-mode .ppicker-col-label {
color: #6b7280;
}
.light-mode .ppicker-front-bays-header div {
color: #1d4ed8;
background: #eff6ff;
}
.light-mode .ppicker-front-cell {
background: linear-gradient(160deg, #dbeafe 0%, #bfdbfe 100%);
border-color: #60a5fa;
color: #1e40af;
box-shadow: 0 3px 0 #bfdbfe, 0 4px 8px rgba(0,0,0,0.06);
}
.light-mode .ppicker-front-cell:hover {
background: linear-gradient(160deg, #bfdbfe 0%, #93c5fd 100%);
border-color: #3b82f6;
color: #1e3a8a;
}
.light-mode .ppicker-front-cell:active {
box-shadow: 0 1px 0 #bfdbfe;
}
.light-mode .ppicker-front-floor-label {
color: #9ca3af;
}
.light-mode .movim-endereco-item {
background: #eff6ff;
border-color: #60a5fa;
color: #1e40af;
}
/* --- Formul�rio Compras Modal --- */
.light-mode #comprasModalForm .form-field label {
color: #374151;
}
.light-mode .modal-close-btn {
color: #6b7280;
}
.light-mode .modal-close-btn:hover {
background: rgba(0, 0, 0, 0.05);
color: #ef4444;
}
/* --- Inputs gen�ricos no modo claro --- */
.light-mode input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(.btn):not(.btn-print),
.light-mode select,
.light-mode textarea {
color: #1f2937;
}
.light-mode .detail-input {
color: #1f2937;
}
/* --- Icon buttons (estrutura produto) modo claro --- */
.light-mode .icon-btn,
.light-mode .produce-btn {
background: #f3f4f6;
border-color: #d1d5db;
}
.light-mode #estruturaProduto #malha .icon-btn {
color: #374151;
background: rgba(0,0,0,0.04);
border-color: rgba(0,0,0,0.1);
}
.light-mode #estruturaProduto #malha .icon-btn:hover {
background: rgba(0,0,0,0.08);
border-color: rgba(0,0,0,0.16);
}
/* --- Estrutura sub-produto (grupo filho) --- */
.light-mode #estruturaProduto #malha li.child-row {
background: rgba(59,130,246,0.06);
border-left-color: rgba(59,130,246,0.35);
box-shadow:
inset 2px 0 0 rgba(59,130,246,0.25),
inset -2px 0 0 rgba(59,130,246,0.25);
}
.light-mode #estruturaProduto #malha li.child-group-header .child-group-title {
color: #1e40af;
}
.light-mode #estruturaProduto #malha li.sub-estrutura-row > .sub-estrutura {
background: rgba(0,0,0,0.02);
border-color: rgba(0,0,0,0.08);
}
.light-mode #estruturaProduto #malha li.sub-estrutura-row ul.malha-sub li {
background: rgba(0,0,0,0.01);
}
/* --- Inactive row --- */
.light-mode .inactive-row {
color: #dc2626;
}
/* --- Side menu --- */
.light-mode .side-menu a {
color: #374151;
}
.light-mode .side-menu a:hover {
color: #1f2937;
}
/* --- Compras A��es Modal --- */
.light-mode .compras-acoes-modal {
color: #1f2937;
}
.light-mode .compras-acao-btn {
color: #374151;
}
/* --- Status circle (mant�m cores sem�nticas) --- */
.light-mode .status-circle.blue { background-color: #396df0; }
.light-mode .status-circle.green { background-color: #3bf083; }
/* --- Scrollbar geral modo claro --- */
.light-mode ::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.04);
}
.light-mode ::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.2);
}
.light-mode ::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, 0.35);
}
/* --- Flash cart�o novo modo claro --- */
.light-mode .flash-new {
background: #bbf7d0 !important;
color: #166534;
}
/* --- Loading bar modo claro --- */
.light-mode .loading-bar {
background: #e5e7eb;
}
/* --- Card pago --- */
.light-mode .card-pago {
background-color: #f3f4f6;
color: #1f2937;
}
/* --- Compras campos toggle --- */
.light-mode .compras-campos-toggle,
.light-mode .compras-campo-colapsavel {
color: #374151;
}
/* --- Nav card modal (geral) --- */
.light-mode .nav-card {
color: #374151;
}
/* --- Sidebar Hamburger --- */
.light-mode .sidebar-hamburger:hover {
background: #2563eb;
color: #ffffff;
}
/* --- �cones dentro de bot�es e contextos espec�ficos --- */
.light-mode .header-menu a {
color: #6b7280;
}
.light-mode .header-menu a.is-active,
.light-mode .header-menu a:hover {
color: #1f2937;
border-bottom-color: #1f2937;
}
/* --- Elementos com inline styles que precisam de dark override --- */
/* Gr�ficos e cards de compras com background branco */
:root:not(.light-mode) #graficoPizzaCard,
:root:not(.light-mode) #graficoMesesWrapper,
:root:not(.light-mode) #graficoPizzaDetalheWrapper {
background: #1e293b !important;
box-shadow: 0 2px 12px rgba(0,0,0,0.3) !important;
}
:root:not(.light-mode) #filterPanel {
background: #1e293b !important;
color: #e2e8f0 !important;
box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
}
/* Tabela de solicita��es (compras) */
:root:not(.light-mode) #listaMinhasSolicitacoesTabela {
background: #111827 !important;
border-color: #334155 !important;
}
:root:not(.light-mode) #listaMinhasSolicitacoesTabela th {
color: #e2e8f0;
}
:root:not(.light-mode) #listaMinhasSolicitacoesTabela td {
color: #d1d5db;
border-color: #334155;
}
/* Inputs de recebimento com fundo branco */
:root:not(.light-mode) #recebimentoGlobalSearch,
:root:not(.light-mode) [id^="recebimentoFilter"] {
background: #0f172a !important;
color: #e2e8f0 !important;
border-color: #334155 !important;
}
:root:not(.light-mode) #recebimentoTbody td.recebimento-coluna-texto,
:root:not(.light-mode) #recebimentoTbody .recebimento-coluna-texto,
:root:not(.light-mode) #recebimentoTbody .recebimento-fornecedor-nome,
:root:not(.light-mode) #recebimentoTbody .recebimento-observacao-texto {
color: #e5e7eb !important;
}
:root:not(.light-mode) #recebimentoTbody .recebimento-detalhes-inline summary {
background: #0f172a !important;
color: #e2e8f0 !important;
border-color: #334155 !important;
}
:root:not(.light-mode) #recebimentoTbody .recebimento-detalhes-inline summary i {
color: #93c5fd !important;
}
:root:not(.light-mode) #recebimentoPane div[style*="background:white"],
:root:not(.light-mode) #recebimentoPane div[style*="background: white"] {
background: #111827 !important;
color: #e5e7eb !important;
}
:root:not(.light-mode) #recebimentoPane table,
:root:not(.light-mode) #recebimentoTbody tr,
:root:not(.light-mode) #recebimentoTbody td {
background: #111827 !important;
color: #e5e7eb !important;
border-color: #334155 !important;
}
:root:not(.light-mode) #recebimentoPane thead tr:nth-child(2),
:root:not(.light-mode) #recebimentoPane thead tr:nth-child(2) th {
background: #1e293b !important;
color: #e2e8f0 !important;
border-color: #334155 !important;
}
:root:not(.light-mode) #recebimentoTbody .recebimento-popover-itens {
background: #111827 !important;
border-color: #334155 !important;
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45) !important;
}
:root:not(.light-mode) #recebimentoTbody .recebimento-popover-itens > div > div {
background: #0f172a !important;
border-color: #334155 !important;
}
:root:not(.light-mode) #comprasContasUtilizadasPane div[style*="background:white"],
:root:not(.light-mode) #comprasContasUtilizadasPane div[style*="background: white"] {
background: #111827 !important;
color: #e5e7eb !important;
}
:root:not(.light-mode) #comprasContasUtilizadasPane table,
:root:not(.light-mode) #comprasContasUtilizadasPane tbody tr,
:root:not(.light-mode) #comprasContasUtilizadasPane td {
background: #111827 !important;
color: #e5e7eb !important;
border-color: #334155 !important;
}
:root:not(.light-mode) #comprasContasUtilizadasPane input {
background: #0f172a !important;
color: #e2e8f0 !important;
border-color: #334155 !important;
}
#comprasContasUtilizadasPane .conta-utilizada-descricao {
color: #0f172a;
}
#comprasContasUtilizadasPane .conta-utilizada-codigo {
color: #64748b;
}
#comprasContasUtilizadasPane .conta-utilizada-observacao {
color: #334155;
}
#comprasContasUtilizadasPane .conta-utilizada-observacao-editavel:hover {
background: rgba(14, 165, 233, 0.08) !important;
}
:root:not(.light-mode) #comprasContasUtilizadasPane .conta-utilizada-descricao,
:root:not(.light-mode) #comprasContasUtilizadasPane .conta-utilizada-codigo,
:root:not(.light-mode) #comprasContasUtilizadasPane .conta-utilizada-observacao {
color: #e5e7eb !important;
}
:root:not(.light-mode) #comprasContasUtilizadasPane .conta-utilizada-observacao-editavel:hover {
background: rgba(59, 130, 246, 0.18) !important;
}
/* Inputs de atividades */
:root:not(.light-mode) #inputNomeAtividade,
:root:not(.light-mode) #inputDescricaoAtividade,
:root:not(.light-mode) #inputNomeAtividadeCompras,
:root:not(.light-mode) #inputDescricaoAtividadeCompras {
background: #0f172a !important;
color: #e2e8f0 !important;
}
/* Modais gen�ricos com background branco inline */
:root:not(.light-mode) .modal-content,
:root:not(.light-mode) .modal-header,
:root:not(.light-mode) .modal-footer {
background: #1e293b !important;
color: #e2e8f0 !important;
}
/* Containers de info com fundo branco dentro de se��es */
:root:not(.light-mode) #minhasComprasWrapper div[style*="background:#fff"],
:root:not(.light-mode) #minhasComprasWrapper div[style*="background: #fff"] {
background: #1e293b !important;
color: #e2e8f0 !important;
}
/* Inputs e selects com fundo branco dentro do app (catch-all safe) */
:root:not(.light-mode) .content-wrapper input[style*="background:#ffffff"],
:root:not(.light-mode) .content-wrapper input[style*="background: #ffffff"],
:root:not(.light-mode) .content-wrapper textarea[style*="background:#ffffff"],
:root:not(.light-mode) .content-wrapper textarea[style*="background: #ffffff"],
:root:not(.light-mode) .content-wrapper select[style*="background:#ffffff"],
:root:not(.light-mode) .content-wrapper select[style*="background: #ffffff"] {
background: #0f172a !important;
color: #e2e8f0 !important;
}
/* Container info com borda azul claro */
:root:not(.light-mode) div[style*="border:2px solid #dbeafe"] {
background: rgba(30, 58, 138, 0.15) !important;
border-color: #1e3a8a !important;
color: #e2e8f0 !important;
}
/* Compras: cards de gr�ficos */
:root:not(.light-mode) #minhasComprasWrapper [style*="box-shadow:0 2px 12px"] {
box-shadow: 0 2px 12px rgba(0,0,0,0.3) !important;
}
/* Inputs de cat�logo/compras com fundo branco inline */
:root:not(.light-mode) #comprasFormPane input[style*="background:#ffffff"],
:root:not(.light-mode) #comprasFormPane input[style*="background: #ffffff"] {
background: #0f172a !important;
color: #e2e8f0 !important;
border-color: #334155 !important;
}
/* --- Ata de Reuni�o / Agenda Modal � modo claro --- */
.light-mode .agenda-modal-overlay {
background: rgba(107, 114, 128, 0.5);
}
/* Calend�rio de reservas no modo claro: aumenta contraste dos chips */
.light-mode .agenda-cal-reserva-item {
font-weight: 700;
}
.light-mode .agenda-cal-reserva-item .agenda-chip-hora,
.light-mode .agenda-cal-reserva-item .agenda-chip-room-icon {
color: inherit;
}
.light-mode .agenda-cal-reserva-item.is-auditorio {
background: #ede9fe;
border-color: #c4b5fd;
color: #4c1d95;
}
.light-mode .agenda-cal-reserva-item.is-sala {
background: #dcfce7;
border-color: #86efac;
color: #14532d;
}
.light-mode .agenda-cal-reserva-item.is-online {
background: #dbeafe;
border-color: #93c5fd;
color: #1e3a8a;
}
.light-mode .agenda-cal-reserva-item.is-visita {
background: #ffedd5;
border-color: #fdba74;
color: #7c2d12;
}
.light-mode .agenda-cal-reserva-item.is-evento {
background: #fce7f3;
border-color: #f9a8d4;
color: #831843;
}
.light-mode .agenda-cal-reserva-item.is-lembrete {
background: #fef3c7;
border-color: #fcd34d;
color: #78350f;
}
.light-mode .agenda-cal-reserva-item.is-cancelada {
background: #f1f5f9;
border-color: #94a3b8;
color: #64748b;
}
.light-mode .agenda-modal-card {
background: #ffffff;
color: #1f2937;
border-color: #e5e7eb;
box-shadow: 0 20px 60px rgba(0,0,0,0.12);
}
.light-mode .agenda-modal-card--v2 {
background: #f8fafc;
}
.light-mode .agenda-aviso-toggle {
color: #64748b;
border-color: #cbd5e1;
}
.light-mode .agenda-modal-card h3,
.light-mode .agenda-modal-card label,
.light-mode .agenda-modal-card span {
color: #1f2937;
}
.light-mode .agenda-modal-close {
color: #6b7280;
border-color: #d1d5db;
}
.light-mode .agenda-modal-close:hover {
background: #f3f4f6;
color: #1f2937;
}
.light-mode .agenda-opcao-btn {
background: #f9fafb;
color: #1f2937;
border-color: #e5e7eb;
}
.light-mode .agenda-opcao-btn:hover {
border-color: #3a6df0;
background: #eff6ff;
}
.light-mode .agenda-form-grid input:not([type="checkbox"]),
.light-mode .agenda-form-grid select,
.light-mode .agenda-form-grid textarea {
background: #ffffff;
color: #1f2937;
border-color: #d1d5db;
}
.light-mode .agenda-form-grid input::placeholder,
.light-mode .agenda-form-grid textarea::placeholder {
color: #9ca3af;
}
/* --- Visao Semanal (Inicio): contraste mais claro no modo branco --- */
.light-mode .semana-day-card {
background: #ffffff;
border-color: #dbe3ee;
color: #1f2937;
box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
}
.light-mode .semana-day-dow,
.light-mode .semana-empty {
color: #6b7280;
}
.light-mode .semana-day-badge {
background: rgba(37, 99, 235, 0.1);
color: #1e40af;
border-color: rgba(37, 99, 235, 0.25);
}
.light-mode .semana-day-card.center {
outline-color: #2563eb;
}
/* --- Chatbot Explorer: contraste no modo preto --- */
:root:not(.light-mode) #chatbotMonitorExplorerSection > div {
background: linear-gradient(135deg, rgba(2, 6, 23, 0.85) 0%, rgba(15, 23, 42, 0.92) 100%) !important;
border-color: rgba(51, 65, 85, 0.7) !important;
}
:root:not(.light-mode) #chatbotMonitorExplorerSection [style*="background:rgba(255,255,255,0.72)"] {
background: rgba(15, 23, 42, 0.78) !important;
border-color: rgba(71, 85, 105, 0.55) !important;
}
:root:not(.light-mode) #chatbotMonitorExplorerSection [style*="background:rgba(15,23,42,0.04)"] {
background: rgba(2, 6, 23, 0.42) !important;
border-color: rgba(71, 85, 105, 0.45) !important;
}
:root:not(.light-mode) #chatbotMonitorExplorerSection table.tabela.padrao thead tr,
:root:not(.light-mode) #chatbotMonitorExplorerSection table.tabela.padrao thead th {
background: #0f172a !important;
color: #e2e8f0 !important;
border-color: #334155 !important;
}
:root:not(.light-mode) #chatbotMonitorExplorerSection table.tabela.padrao tbody tr {
background: #111827 !important;
}
:root:not(.light-mode) #chatbotMonitorExplorerSection table.tabela.padrao td {
color: #cbd5e1 !important;
border-color: #334155 !important;
}
:root:not(.light-mode) #chatbotMonitorExplorerSection [style*="color:#374151"],
:root:not(.light-mode) #chatbotMonitorExplorerSection [style*="color: #374151"] {
color: #e2e8f0 !important;
}
:root:not(.light-mode) #chatbotMonitorExplorerSection [style*="color:#6b7280"],
:root:not(.light-mode) #chatbotMonitorExplorerSection [style*="color: #6b7280"] {
color: #94a3b8 !important;
}
:root:not(.light-mode) #chatbotMonitorExplorerSection [style*="background:#334155"] {
background: #1e293b !important;
}
:root:not(.light-mode) #chatbotMonitorExplorerSection [style*="background:#cbd5e1"] {
background: #334155 !important;
}
/* --- Modal Filtrar Produtos: contraste no modo preto --- */
:root:not(.light-mode) #filterPanel {
background: #0f172a !important;
color: #e2e8f0 !important;
border: 1px solid #334155 !important;
box-shadow: 0 18px 48px rgba(0,0,0,0.55) !important;
}
:root:not(.light-mode) #filterPanel [style*="color:#111"],
:root:not(.light-mode) #filterPanel [style*="color: #111"],
:root:not(.light-mode) #filterPanel [style*="color:#374151"],
:root:not(.light-mode) #filterPanel [style*="color: #374151"] {
color: #e2e8f0 !important;
}
:root:not(.light-mode) #filterPanel [style*="border-bottom:1px solid #e5e7eb"] {
border-bottom-color: #334155 !important;
}
:root:not(.light-mode) #filterPanel select,
:root:not(.light-mode) #filterPanel input[type="text"],
:root:not(.light-mode) #filterPanel input[type="search"] {
background: #111827 !important;
color: #e2e8f0 !important;
border-color: #334155 !important;
}
:root:not(.light-mode) #filterPanel option {
background: #111827;
color: #e2e8f0;
}
:root:not(.light-mode) #filterPanel #filterPanelCloseBtn {
color: #94a3b8 !important;
}
:root:not(.light-mode) #filterPanel #filterPanelCloseBtn:hover {
color: #e2e8f0 !important;
}
:root:not(.light-mode) #filterPanel #filterPanelLimparBtn {
background: #1e293b !important;
color: #e2e8f0 !important;
border-color: #334155 !important;
}
/* Lista de produtos: filtros progressivos em todas as telas. */
.product-filter-mobile-toggle {
display: grid;
grid-template-columns: minmax(0, 1fr) auto 18px;
align-items: center;
gap: 8px;
width: 100%;
min-height: 46px;
padding: 9px 11px;
color: #26364a;
background: #f8fafc;
border: 0;
text-align: left;
cursor: pointer;
}
#filterPanel {
max-height: min(90vh, 760px);
overflow-y: auto;
box-sizing: border-box;
}
#filterPanel .product-filter-quick {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px 10px !important;
}
#filterPanel .product-filter-quick > label,
#filterPanel .product-filter-quick > div {
min-height: 38px;
margin: 0;
padding: 7px 8px;
background: #f6f8fb;
border: 1px solid #dbe3ec;
border-radius: 7px;
box-sizing: border-box;
}
#filterPanel .product-filter-quick > div {
grid-column: 1 / -1;
}
#filterPanel .product-filter-fields {
gap: 8px !important;
padding-top: 8px;
}
#filterPanel .product-filter-field {
padding: 0;
background: #fff;
border: 1px solid #cfd9e4;
border-radius: 8px;
overflow: hidden;
}
#filterPanel .product-filter-mobile-name {
font-size: 14px;
font-weight: 700;
}
#filterPanel .product-filter-mobile-state {
color: #65758a;
font-size: 12px;
font-weight: 600;
}
#filterPanel .product-filter-field.has-selection .product-filter-mobile-state {
color: #1d4ed8;
}
#filterPanel .product-filter-mobile-toggle i {
transition: transform .18s ease;
}
#filterPanel .product-filter-field.is-mobile-open .product-filter-mobile-toggle i {
transform: rotate(180deg);
}
#filterPanel .product-filter-field > label,
#filterPanel .product-filter-field > select,
#filterPanel .product-filter-field > small {
display: none !important;
}
#filterPanel .product-filter-field.is-mobile-open > select,
#filterPanel .product-filter-field.is-mobile-open > small {
display: block !important;
}
#filterPanel .product-filter-field.is-mobile-open > select {
width: calc(100% - 20px) !important;
min-height: 118px;
max-height: 190px;
margin: 2px 10px 7px;
padding: 8px !important;
background: #fff !important;
font-size: 15px !important;
}
#filterPanel .product-filter-field.is-mobile-open > small {
margin: 0 10px 10px !important;
}
#filterPanel .product-filter-actions {
position: sticky;
bottom: -24px;
z-index: 4;
padding: 10px 0 0;
background: #fff;
border-top: 1px solid #dbe3ec;
}
:root:not(.light-mode) #filterPanel .product-filter-field,
:root:not(.light-mode) #filterPanel .product-filter-actions {
background: #0f172a !important;
border-color: #334155 !important;
}
:root:not(.light-mode) #filterPanel .product-filter-quick > label,
:root:not(.light-mode) #filterPanel .product-filter-quick > div,
:root:not(.light-mode) #filterPanel .product-filter-mobile-toggle {
color: #e2e8f0;
background: #172033;
border-color: #334155;
}
@media (max-width: 768px) {
#filterPanelOverlay {
align-items: stretch !important;
justify-content: stretch !important;
padding: 0 !important;
}
#filterPanel {
display: flex;
flex-direction: column;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
height: 100dvh;
max-height: 100dvh;
padding: 0 14px calc(10px + env(safe-area-inset-bottom)) !important;
overflow-y: auto;
border: 0 !important;
border-radius: 0 !important;
box-sizing: border-box;
}
#filterPanel .product-filter-header {
position: sticky;
top: 0;
z-index: 4;
min-height: 58px;
margin: 0 -14px !important;
padding: max(8px, env(safe-area-inset-top)) 16px 8px;
background: #fff;
border-bottom: 1px solid #dbe3ec;
}
#filterPanel #filterPanelCloseBtn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
padding: 0 !important;
border-radius: 8px;
}
#filterPanel .product-filter-quick {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px 10px !important;
padding: 12px 0 !important;
}
#filterPanel .product-filter-quick > label,
#filterPanel .product-filter-quick > div {
min-height: 38px;
margin: 0;
padding: 7px 8px;
background: #f6f8fb;
border: 1px solid #dbe3ec;
border-radius: 7px;
box-sizing: border-box;
}
#filterPanel .product-filter-quick > div {
grid-column: 1 / -1;
}
#filterPanel .product-filter-quick input[type="checkbox"] {
flex: 0 0 20px;
width: 20px !important;
height: 20px !important;
}
#filterPanel .product-filter-fields {
gap: 8px !important;
padding: 8px 0 4px;
}
#filterPanel .product-filter-field {
padding: 0;
background: #fff;
border: 1px solid #cfd9e4;
border-radius: 8px;
overflow: hidden;
}
#filterPanel .product-filter-mobile-toggle {
display: grid;
grid-template-columns: minmax(0, 1fr) auto 18px;
align-items: center;
gap: 8px;
width: 100%;
min-height: 48px;
padding: 9px 11px;
color: #26364a;
background: #f8fafc;
border: 0;
text-align: left;
}
#filterPanel .product-filter-mobile-name {
font-size: 14px;
font-weight: 700;
}
#filterPanel .product-filter-mobile-state {
color: #65758a;
font-size: 12px;
font-weight: 600;
}
#filterPanel .product-filter-field.has-selection .product-filter-mobile-state {
color: #1d4ed8;
}
#filterPanel .product-filter-mobile-toggle i {
transition: transform .18s ease;
}
#filterPanel .product-filter-field.is-mobile-open .product-filter-mobile-toggle i {
transform: rotate(180deg);
}
#filterPanel .product-filter-field > label,
#filterPanel .product-filter-field > select,
#filterPanel .product-filter-field > small {
display: none !important;
}
#filterPanel .product-filter-field.is-mobile-open > select,
#filterPanel .product-filter-field.is-mobile-open > small {
display: block !important;
}
#filterPanel .product-filter-field.is-mobile-open > select {
width: calc(100% - 20px) !important;
min-height: 118px;
max-height: 190px;
margin: 2px 10px 7px;
padding: 8px !important;
background: #fff !important;
font-size: 16px !important;
}
#filterPanel .product-filter-field.is-mobile-open > small {
margin: 0 10px 10px !important;
}
#filterPanel .product-filter-actions {
position: sticky;
bottom: calc(-10px - env(safe-area-inset-bottom));
z-index: 4;
display: grid !important;
grid-template-columns: .85fr 1.15fr;
margin: 10px -14px 0 !important;
padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
background: #fff;
border-top: 1px solid #dbe3ec;
box-shadow: 0 -8px 18px rgba(15, 23, 42, .08);
}
#filterPanel .product-filter-actions button {
width: 100%;
min-height: 44px;
padding: 9px 12px !important;
}
:root:not(.light-mode) #filterPanel .product-filter-header,
:root:not(.light-mode) #filterPanel .product-filter-actions,
:root:not(.light-mode) #filterPanel .product-filter-field {
background: #0f172a !important;
border-color: #334155 !important;
}
:root:not(.light-mode) #filterPanel .product-filter-quick > label,
:root:not(.light-mode) #filterPanel .product-filter-quick > div,
:root:not(.light-mode) #filterPanel .product-filter-mobile-toggle {
color: #e2e8f0;
background: #172033;
border-color: #334155;
}
}
/* Lista de produtos: central mestra de filtros e relatórios. */
#filterPanelOverlay.product-filter-overlay {
padding: 24px;
background: rgba(15, 23, 42, .64) !important;
backdrop-filter: blur(3px);
}
#filterPanel.product-filter-panel {
display: flex;
flex-direction: column;
width: min(1080px, calc(100vw - 48px)) !important;
max-width: 1080px !important;
max-height: min(90dvh, 820px);
padding: 0 !important;
overflow-y: auto;
background: #f4f7fb !important;
border: 1px solid #cbd5e1 !important;
border-radius: 10px !important;
box-shadow: 0 24px 64px rgba(15, 23, 42, .3) !important;
}
#filterPanel .product-filter-header {
position: sticky;
top: 0;
z-index: 8;
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto 44px;
gap: 12px;
min-height: 72px;
margin: 0 !important;
padding: 12px 18px;
background: #0f1d35;
border-bottom: 3px solid #10b981;
box-sizing: border-box;
}
#filterPanel .product-filter-heading {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
#filterPanel .product-filter-heading-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 40px;
width: 40px;
height: 40px;
color: #fff;
background: #0f8b6d;
border-radius: 7px;
}
#filterPanel .product-filter-heading > span:last-child {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
#filterPanel .product-filter-heading strong {
color: #fff !important;
font-size: 18px;
line-height: 1.2;
}
#filterPanel .product-filter-heading small {
overflow: hidden;
color: #b7c4d6;
font-size: 12px;
line-height: 1.35;
text-overflow: ellipsis;
white-space: nowrap;
}
#filterPanel .product-filter-active-count {
align-self: center;
padding: 6px 10px;
color: #dbeafe;
background: #1e3a5f;
border: 1px solid #36567e;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
white-space: nowrap;
}
#filterPanel #filterPanelCloseBtn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0 !important;
color: #dbe4f0 !important;
background: transparent !important;
border: 1px solid #3a4c67 !important;
border-radius: 7px;
}
#filterPanel #filterPanelCloseBtn:hover,
#filterPanel #filterPanelCloseBtn:focus-visible {
color: #fff !important;
background: #20324d !important;
outline: 2px solid #5eead4;
outline-offset: 2px;
}
#filterPanel .product-filter-section-heading {
display: flex;
align-items: center;
gap: 10px;
padding: 16px 20px 2px;
color: #0f172a;
}
#filterPanel .product-filter-section-heading > i {
color: #0f8b6d;
font-size: 15px;
}
#filterPanel .product-filter-section-heading > span {
display: flex;
flex-direction: column;
gap: 1px;
}
#filterPanel .product-filter-section-heading strong {
font-size: 14px;
line-height: 1.3;
}
#filterPanel .product-filter-section-heading small {
color: #64748b;
font-size: 11px;
line-height: 1.35;
}
#filterPanel .product-filter-fields-heading {
border-top: 1px solid #dbe3ec;
}
#filterPanel .product-filter-visibility-heading {
border-top: 1px solid #dbe3ec;
}
#filterPanel .product-filter-visibility-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
padding: 10px 20px 16px;
}
#filterPanel .product-filter-visibility-grid > label {
display: flex;
align-items: center;
gap: 9px;
min-height: 44px;
padding: 8px 10px;
color: #334155;
background: #fff;
border: 1px solid #cad5e2;
border-radius: 8px;
font-size: 12px;
font-weight: 700;
cursor: pointer;
box-sizing: border-box;
}
#filterPanel .product-filter-visibility-grid input {
flex: 0 0 20px;
width: 20px;
height: 20px;
accent-color: #0f8b6d;
}
#filterPanel .product-filter-visibility-grid > label:has(input:checked) {
color: #065f46;
background: #ecfdf5;
border-color: #10b981;
}
#filterPanel .product-filter-quick {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 8px !important;
margin: 0 !important;
padding: 12px 20px 18px !important;
border-bottom: 0 !important;
}
#filterPanel .product-filter-quick > label,
#filterPanel .product-filter-quick > div {
display: flex !important;
align-items: flex-start !important;
gap: 9px !important;
min-height: 58px !important;
margin: 0 !important;
padding: 10px 11px !important;
color: #26364a !important;
background: #fff !important;
border: 1px solid #cad5e2 !important;
border-radius: 8px !important;
box-sizing: border-box;
cursor: pointer;
transition: border-color .18s ease, background-color .18s ease;
}
#filterPanel .product-filter-quick > label:hover,
#filterPanel .product-filter-quick > div:hover {
background: #f8fbff !important;
border-color: #7aa2d6 !important;
}
#filterPanel .product-filter-quick > label:has(input:checked),
#filterPanel .product-filter-quick > div:has(input:checked) {
background: #ecfdf5 !important;
border-color: #10b981 !important;
box-shadow: inset 3px 0 0 #10b981;
}
#filterPanel .product-filter-quick > label:has(#filterEstoqueNegativo:checked),
#filterPanel .product-filter-quick > label:has(#filterSaldoDivergenteEndereco:checked),
#filterPanel .product-filter-quick > label:has(#filterSaldoEnderecoSemOmie:checked) {
background: #fff1f2 !important;
border-color: #fb7185 !important;
box-shadow: inset 3px 0 0 #e11d48;
}
#filterPanel .product-filter-quick input[type="checkbox"] {
flex: 0 0 20px;
width: 20px !important;
height: 20px !important;
margin: 0 !important;
accent-color: #0f8b6d !important;
cursor: pointer;
}
#filterPanel .product-filter-quick span[style*="flex-direction:column"] {
gap: 3px !important;
min-width: 0;
color: inherit !important;
}
#filterPanel .product-filter-quick small {
color: #64748b !important;
font-size: 11px !important;
font-weight: 500 !important;
line-height: 1.35 !important;
}
#filterPanel .product-filter-quick > div {
grid-column: auto !important;
align-items: center !important;
flex-wrap: wrap;
}
#filterPanel #filterProximoEstoqueMinPercent {
width: 60px !important;
min-height: 34px;
padding: 5px 7px !important;
color: #0f172a !important;
background: #fff !important;
border: 1px solid #94a3b8 !important;
border-radius: 6px !important;
font-size: 14px !important;
font-weight: 700;
}
#filterPanel .product-filter-fields {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px !important;
padding: 12px 20px 20px;
}
#filterPanel .product-filter-field {
min-width: 0;
background: #fff !important;
border: 1px solid #cad5e2 !important;
border-radius: 8px !important;
}
#filterPanel .product-filter-actions {
position: sticky;
bottom: 0 !important;
z-index: 8;
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto auto;
align-items: center;
gap: 10px !important;
margin: 0 !important;
padding: 12px 18px !important;
background: #fff !important;
border-top: 1px solid #cbd5e1 !important;
box-shadow: 0 -8px 20px rgba(15, 23, 42, .07);
}
#filterPanel .product-filter-actions-copy {
display: flex;
flex-direction: column;
gap: 1px;
color: #334155;
}
#filterPanel .product-filter-actions-copy strong { font-size: 12px; }
#filterPanel .product-filter-actions-copy small { color: #64748b; font-size: 11px; }
#filterPanel .product-filter-actions button {
min-height: 44px;
padding: 9px 16px !important;
border-radius: 7px !important;
}
#filterPanel #filterPanelAplicarBtn {
background: #0f8b6d !important;
}
#filterPanel #filterPanelAplicarBtn:hover,
#filterPanel #filterPanelAplicarBtn:focus-visible {
background: #08755d !important;
}
@media (min-width: 769px) {
#filterPanel .product-filter-mobile-toggle { display: none !important; }
#filterPanel .product-filter-field > label {
display: block !important;
margin: 0;
padding: 9px 10px 3px;
color: #334155;
font-size: 12px;
font-weight: 700;
}
#filterPanel .product-filter-field > select {
display: block !important;
width: calc(100% - 20px) !important;
min-height: 100px;
max-height: 142px;
margin: 3px 10px 5px;
padding: 7px !important;
color: #0f172a !important;
background: #f8fafc !important;
border: 1px solid #cbd5e1 !important;
border-radius: 6px !important;
font-size: 13px !important;
}
#filterPanel .product-filter-field > small {
display: block !important;
margin: 0 10px 9px !important;
color: #64748b !important;
font-size: 10px !important;
}
}
:root:not(.light-mode) #filterPanel.product-filter-panel {
background: #101827 !important;
}
:root:not(.light-mode) #filterPanel .product-filter-section-heading,
:root:not(.light-mode) #filterPanel .product-filter-actions-copy,
:root:not(.light-mode) #filterPanel .product-filter-field > label {
color: #e2e8f0 !important;
}
:root:not(.light-mode) #filterPanel .product-filter-section-heading small,
:root:not(.light-mode) #filterPanel .product-filter-actions-copy small {
color: #94a3b8 !important;
}
:root:not(.light-mode) #filterPanel .product-filter-quick > label,
:root:not(.light-mode) #filterPanel .product-filter-quick > div,
:root:not(.light-mode) #filterPanel .product-filter-field,
:root:not(.light-mode) #filterPanel .product-filter-visibility-grid > label {
color: #e2e8f0 !important;
background: #172033 !important;
border-color: #334155 !important;
}
:root:not(.light-mode) #filterPanel .product-filter-quick > label:has(input:checked),
:root:not(.light-mode) #filterPanel .product-filter-quick > div:has(input:checked) {
background: #12352f !important;
border-color: #2dd4bf !important;
}
:root:not(.light-mode) #filterPanel .product-filter-quick small {
color: #aab8ca !important;
}
:root:not(.light-mode) #filterPanel .product-filter-actions {
background: #0f172a !important;
border-color: #334155 !important;
}
@media (max-width: 1024px) and (min-width: 769px) {
#filterPanel .product-filter-quick,
#filterPanel .product-filter-fields,
#filterPanel .product-filter-visibility-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (max-width: 768px) {
#filterPanelOverlay.product-filter-overlay { padding: 0; }
#filterPanel.product-filter-panel {
width: 100% !important;
height: 100dvh;
max-height: 100dvh;
padding: 0 14px calc(10px + env(safe-area-inset-bottom)) !important;
border-radius: 0 !important;
}
#filterPanel .product-filter-header {
grid-template-columns: minmax(0, 1fr) 44px;
margin: 0 -14px !important;
padding: max(8px, env(safe-area-inset-top)) 14px 8px;
}
#filterPanel .product-filter-heading-icon,
#filterPanel .product-filter-active-count { display: none; }
#filterPanel .product-filter-heading strong { font-size: 16px; }
#filterPanel .product-filter-heading small {
max-width: 76vw;
white-space: normal;
}
#filterPanel .product-filter-section-heading { padding: 14px 0 2px; }
#filterPanel .product-filter-quick {
grid-template-columns: 1fr !important;
padding: 10px 0 16px !important;
}
#filterPanel .product-filter-quick > label,
#filterPanel .product-filter-quick > div {
min-height: 54px !important;
padding: 10px !important;
}
#filterPanel .product-filter-fields {
grid-template-columns: 1fr !important;
padding: 10px 0 8px;
}
#filterPanel .product-filter-visibility-grid {
grid-template-columns: 1fr !important;
padding: 10px 0 14px;
}
#filterPanel .product-filter-actions {
grid-template-columns: .9fr 1.1fr;
margin: 10px -14px 0 !important;
padding: 10px 14px calc(10px + env(safe-area-inset-bottom)) !important;
}
#filterPanel .product-filter-actions-copy { display: none; }
}
/* --- Modal Cotacao Kanban: contraste no modo preto ---
cp-detail-* força fundo claro; dark mode força texto claro → texto sumia.
Aqui o shell inteiro fica escuro e o texto claro. */
:root:not(.light-mode) #modalCotacaoKanban.cp-detail-modal .cp-detail-shell,
:root:not(.light-mode) #modalCotacaoKanban .modal-content {
background: #0f172a !important;
color: #e2e8f0 !important;
border: 1px solid #334155 !important;
}
:root:not(.light-mode) #modalCotacaoKanban .cp-detail-header,
:root:not(.light-mode) #modalCotacaoKanban .cp-detail-footer,
:root:not(.light-mode) #modalCotacaoKanban .modal-header,
:root:not(.light-mode) #modalCotacaoKanban .modal-footer {
background: #111827 !important;
color: #e2e8f0 !important;
border-color: #334155 !important;
}
:root:not(.light-mode) #modalCotacaoKanban .cp-detail-header h3,
:root:not(.light-mode) #modalCotacaoKanban .cp-detail-header strong,
:root:not(.light-mode) #modalCotacaoKanban .cp-detail-header span,
:root:not(.light-mode) #modalCotacaoKanban .modal-header h3,
:root:not(.light-mode) #modalCotacaoKanban .modal-header span,
:root:not(.light-mode) #modalCotacaoKanban #modalCotacaoKanbanTitulo {
color: #e2e8f0 !important;
}
:root:not(.light-mode) #modalCotacaoKanban .cp-detail-body,
:root:not(.light-mode) #modalCotacaoKanban #modalCotacaoKanbanBody {
background: #0f172a !important;
color: #e2e8f0 !important;
}
:root:not(.light-mode) #modalCotacaoKanban #modalCotacaoKanbanBody [style*="background:#ede9fe"] {
background: rgba(55, 48, 163, 0.35) !important;
border-color: #7c3aed !important;
color: #e2e8f0 !important;
}
:root:not(.light-mode) #modalCotacaoKanban #modalCotacaoKanbanBody [style*="background:#f9fafb"] {
background: rgba(15, 23, 42, 0.85) !important;
border-color: #334155 !important;
color: #e2e8f0 !important;
}
:root:not(.light-mode) #modalCotacaoKanban #modalCotacaoKanbanBody [style*="background:#ffffff"],
:root:not(.light-mode) #modalCotacaoKanban #modalCotacaoKanbanBody [style*="background: #ffffff"],
:root:not(.light-mode) #modalCotacaoKanban #modalCotacaoKanbanBody [style*="background:#f3f4f6"],
:root:not(.light-mode) #modalCotacaoKanban #modalCotacaoKanbanBody [style*="background:#fff"] {
background: #111827 !important;
color: #e2e8f0 !important;
}
:root:not(.light-mode) #modalCotacaoKanban #modalCotacaoKanbanBody,
:root:not(.light-mode) #modalCotacaoKanban #modalCotacaoKanbanBody div,
:root:not(.light-mode) #modalCotacaoKanban #modalCotacaoKanbanBody span,
:root:not(.light-mode) #modalCotacaoKanban #modalCotacaoKanbanBody strong,
:root:not(.light-mode) #modalCotacaoKanban #modalCotacaoKanbanBody label,
:root:not(.light-mode) #modalCotacaoKanban #modalCotacaoKanbanBody p,
:root:not(.light-mode) #modalCotacaoKanban #modalCotacaoKanbanBody h4,
:root:not(.light-mode) #modalCotacaoKanban #modalCotacaoKanbanBody h5 {
color: #e2e8f0 !important;
}
:root:not(.light-mode) #modalCotacaoKanban #modalCotacaoKanbanBody [style*="color:#1f2937"],
:root:not(.light-mode) #modalCotacaoKanban #modalCotacaoKanbanBody [style*="color: #1f2937"],
:root:not(.light-mode) #modalCotacaoKanban #modalCotacaoKanbanBody [style*="color:#374151"],
:root:not(.light-mode) #modalCotacaoKanban #modalCotacaoKanbanBody [style*="color:#6b7280"],
:root:not(.light-mode) #modalCotacaoKanban #modalCotacaoKanbanBody [style*="color:#5b21b6"],
:root:not(.light-mode) #modalCotacaoKanban #modalCotacaoKanbanBody [style*="color:#166534"],
:root:not(.light-mode) #modalCotacaoKanban #modalCotacaoKanbanBody [style*="color:#111827"] {
color: #e2e8f0 !important;
}
/* Botões com texto branco explícito mantêm contraste no fundo colorido */
:root:not(.light-mode) #modalCotacaoKanban #modalCotacaoKanbanBody button[style*="color:#ffffff"],
:root:not(.light-mode) #modalCotacaoKanban #modalCotacaoKanbanBody button[style*="color:#fff"],
:root:not(.light-mode) #modalCotacaoKanban #modalCotacaoKanbanBody button[style*="color: #ffffff"],
:root:not(.light-mode) #modalCotacaoKanban #modalCotacaoKanbanBody button[style*="color: #fff"] {
color: #ffffff !important;
}
:root:not(.light-mode) #modalCotacaoKanban #modalCotacaoKanbanBody input,
:root:not(.light-mode) #modalCotacaoKanban #modalCotacaoKanbanBody textarea,
:root:not(.light-mode) #modalCotacaoKanban #modalCotacaoKanbanBody select {
background: #0b1220 !important;
border-color: #334155 !important;
color: #e2e8f0 !important;
}
:root:not(.light-mode) #modalCotacaoKanban #modalCotacaoKanbanBody input::placeholder,
:root:not(.light-mode) #modalCotacaoKanban #modalCotacaoKanbanBody textarea::placeholder {
color: #94a3b8 !important;
}
:root:not(.light-mode) #modalCotacaoKanban #modalCotacaoKanbanBody [style*="border:1px solid #d1d5db"],
:root:not(.light-mode) #modalCotacaoKanban #modalCotacaoKanbanBody [style*="border:2px solid #e5e7eb"],
:root:not(.light-mode) #modalCotacaoKanban #modalCotacaoKanbanBody [style*="border:2px solid #8b5cf6"],
:root:not(.light-mode) #modalCotacaoKanban #modalCotacaoKanbanBody [style*="border:1px solid #c4b5fd"],
:root:not(.light-mode) #modalCotacaoKanban #modalCotacaoKanbanBody [style*="border-top:1px solid #e5e7eb"] {
border-color: #334155 !important;
}
:root:not(.light-mode) #modalCotacaoKanban .modal-close,
:root:not(.light-mode) #modalCotacaoKanban .btn-secondary {
color: #e2e8f0 !important;
}
/* Dark mode para Modal "Meus Itens - aguardando aprova��o" */
:root:not(.light-mode) #modalPedidoBody {
background: #0f172a !important;
color: #e2e8f0 !important;
}
:root:not(.light-mode) #modalPedidoBody [style*="background:#f9fafb"],
:root:not(.light-mode) #modalPedidoBody [style*="background:#ffffff"],
:root:not(.light-mode) #modalPedidoBody [style*="background: #ffffff"] {
background: #111827 !important;
border-color: #334155 !important;
}
:root:not(.light-mode) #modalPedidoBody [style*="color:#6b7280"],
:root:not(.light-mode) #modalPedidoBody [style*="color:#374151"],
:root:not(.light-mode) #modalPedidoBody [style*="color:#059669"],
:root:not(.light-mode) #modalPedidoBody [style*="color: #6b7280"],
:root:not(.light-mode) #modalPedidoBody [style*="color: #374151"] {
color: #e2e8f0 !important;
}
:root:not(.light-mode) #modalPedidoBody [style*="border-bottom:1px solid #e5e7eb"],
:root:not(.light-mode) #modalPedidoBody [style*="border-bottom:2px solid #e5e7eb"],
:root:not(.light-mode) #modalPedidoBody [style*="border:1px solid #e5e7eb"] {
border-color: #334155 !important;
}
:root:not(.light-mode) #modalPedidoBody table {
color: #e2e8f0 !important;
}
:root:not(.light-mode) #modalPedidoBody table th {
border-bottom-color: #334155 !important;
}
:root:not(.light-mode) #modalPedidoBody [style*="font-weight:700"] {
color: #e2e8f0 !important;
}
/* ================================================================
Dark mode � Kanban "Compras" (colunas kanban-column-minhas)
Inline styles no JS usam #f8fafc/#ffffff ? sobrescrevemos aqui
================================================================ */
/* Colunas */
:root:not(.light-mode) .kanban-column-minhas {
background: #111827 !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.35) !important;
}
/* Cards dentro das colunas */
:root:not(.light-mode) .kanban-column-minhas .kanban-card {
background: #1e293b !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.35) !important;
}
/* Badge de grupo (req. n�mero) com background #f3f4f6 */
:root:not(.light-mode) .kanban-column-minhas .kanban-card [style*="background:#f3f4f6"] {
background: #0f172a !important;
border-color: #334155 !important;
}
/* Textos do badge de grupo */
:root:not(.light-mode) .kanban-column-minhas .kanban-card [style*="color:#6b7280"],
:root:not(.light-mode) .kanban-column-minhas .kanban-card [style*="color:#374151"] {
color: #94a3b8 !important;
}
/* Bot�es "expandir itens" (chevron) */
:root:not(.light-mode) .kanban-column-minhas .kanban-card [style*="background:#e5e7eb"] {
background: #334155 !important;
color: #e2e8f0 !important;
}
/* Placeholder "Nenhum item" e "Carregando..." */
:root:not(.light-mode) .kanban-column-minhas [style*="background:#f8fafc"] {
background: #0f172a !important;
border-color: #334155 !important;
}
/* Badge contador de itens (verde #10b981 � mant�m cor; s� texto branco j� est� ok) */
/* ================================================================
KANBAN DE SOLICITA��ES � Modo escuro (melhor contraste)
================================================================ */
/* Colunas � fundo mais distingu�vel */
:root:not(.light-mode) #kanbanSolicBoard > div > div {
background: #141a27 !important;
border-color: #1e293b !important;
}
/* Headers de coluna � fundo levemente mais claro */
:root:not(.light-mode) #kanbanSolicBoard > div > div > div:first-child {
border-bottom-width: 2px !important;
}
/* Cards SEP � melhor destaque */
:root:not(.light-mode) .kanban-sep-card {
background: #1e293b !important;
border-color: #334155 !important;
}
:root:not(.light-mode) .kanban-sep-card:hover {
background: #253347 !important;
}
/* Texto "Nenhum" nos cards vazios */
:root:not(.light-mode) #kanbanSolicBoard div[style*="color:#374151"] {
color: #4b5563 !important;
}
/* Tooltip */
:root:not(.light-mode) div[style*="background:#1c1c1c"][style*="position:fixed"] {
background: #1e293b !important;
border-color: #334155 !important;
}
:root:not(.light-mode) div[style*="background:#1c1c1c"][style*="position:fixed"] div[style*="border-bottom:1px solid #222"] {
border-color: #334155 !important;
}
/* Modal de edi��o SEP */
:root:not(.light-mode) #modalEdicaoSep > div {
background: #1e293b !important;
border-color: #334155 !important;
}
:root:not(.light-mode) #modalEdicaoSep > div > div[style*="background:#171717"] {
background: #141a27 !important;
border-color: #334155 !important;
}
:root:not(.light-mode) #modalEdicaoSep div[style*="border-top:1px solid #222"],
:root:not(.light-mode) #modalEdicaoSep div[style*="border-top:1px solid #2a2a2a"] {
border-color: #334155 !important;
}
:root:not(.light-mode) #modalEdicaoSep input.sep-edit-qty {
background: #141a27 !important;
border-color: #475569 !important;
}
/* ================================================================
KANBAN DE SOLICITA��ES � Modo claro
================================================================ */
/* Board container */
.light-mode #kanbanSolicBoard > div > div {
background: #ffffff !important;
border-color: #e2e8f0 !important;
}
/* Coluna headers � manter cores de cada coluna, mas fundo claro */
.light-mode #kanbanSolicBoard > div > div > div:first-child {
background: #f8fafc !important;
}
/* Cards SEP */
.light-mode .kanban-sep-card {
background: #f9fafb !important;
border-color: #e2e8f0 !important;
}
.light-mode .kanban-sep-card:hover {
border-color: #94a3b8 !important;
}
/* Card � nome SEP (amarelo ok no escuro, precisa escurecer no claro) */
.light-mode .kanban-sep-card span[style*="color:#f59e0b"],
.light-mode .kanban-sep-card span[style*="color: #f59e0b"] {
color: #b45309 !important;
}
/* Card � nome do usu�rio */
.light-mode .kanban-sep-card span[style*="color:#d1d5db"],
.light-mode .kanban-sep-card span[style*="color: #d1d5db"] {
color: #374151 !important;
}
/* Card � data e �cones */
.light-mode .kanban-sep-card span[style*="color:#9ca3af"],
.light-mode .kanban-sep-card span[style*="color: #9ca3af"] {
color: #6b7280 !important;
}
.light-mode .kanban-sep-card i[style*="color:#6b7280"] {
color: #9ca3af !important;
}
/* Card � hint "clique para editar" */
.light-mode .kanban-sep-card span[style*="color:#4b5563"] {
color: #9ca3af !important;
}
/* Card � link "No carrinho" */
.light-mode .kanban-sep-card span[style*="color:#6b7280"][style*="font-style:italic"] {
color: #6b7280 !important;
}
/* Cards vazios "Nenhum" */
.light-mode #kanbanSolicBoard div[style*="color:#374151"] {
color: #9ca3af !important;
}
/* Status text */
.light-mode #kanbanSolicStatus {
color: #64748b !important;
}
/* Tooltip hover */
.light-mode div[style*="background:#1c1c1c"][style*="position:fixed"] {
background: #ffffff !important;
border-color: #e2e8f0 !important;
box-shadow: 0 8px 32px rgba(15,23,42,.12) !important;
}
.light-mode div[style*="background:#1c1c1c"][style*="position:fixed"] div[style*="color:#f59e0b"] {
color: #b45309 !important;
}
.light-mode div[style*="background:#1c1c1c"][style*="position:fixed"] div[style*="color:#d1d5db"] {
color: #374151 !important;
}
.light-mode div[style*="background:#1c1c1c"][style*="position:fixed"] div[style*="color:#f0f0f0"] {
color: #0f172a !important;
}
.light-mode div[style*="background:#1c1c1c"][style*="position:fixed"] div[style*="border-bottom:1px solid #222"] {
border-color: #e5e7eb !important;
}
/* Modal de edi��o SEP */
.light-mode #modalEdicaoSep > div {
background: #ffffff !important;
border-color: #e2e8f0 !important;
}
.light-mode #modalEdicaoSep > div > div[style*="background:#171717"] {
background: #f8fafc !important;
border-color: #e2e8f0 !important;
}
.light-mode #modalEdicaoSep span[style*="color:#f0f0f0"] {
color: #0f172a !important;
}
.light-mode #modalEdicaoSep div[style*="border-top:1px solid #222"],
.light-mode #modalEdicaoSep div[style*="border-top:1px solid #2a2a2a"] {
border-color: #e5e7eb !important;
}
.light-mode #modalEdicaoSep div[style*="color:#f59e0b"] {
color: #b45309 !important;
}
.light-mode #modalEdicaoSep div[style*="color:#d1d5db"] {
color: #374151 !important;
}
.light-mode #modalEdicaoSep div[style*="color:#9ca3af"] {
color: #6b7280 !important;
}
.light-mode #modalEdicaoSep input.sep-edit-qty {
background: #f9fafb !important;
border-color: #d1d5db !important;
color: #0f172a !important;
}
.light-mode #modalEdicaoSep button#btnModalEdicaoSepFechar {
color: #6b7280 !important;
}
/* ================================================================
FIM DO BLOCO DE MODO ESCURO/CLARO
================================================================ */
/* ================================================================
OPERA��O RESPONSIVA: HOME, PRODUTOS E MOVIMENTA��O
================================================================ */
.mobile-operations-home {
display: none;
}
.mobile-filter-label {
display: none;
}
.lp-tab-count {
min-width: 22px;
padding: 2px 6px;
border-radius: 999px;
background: rgba(148, 163, 184, .16);
font-variant-numeric: tabular-nums;
font-size: 11px;
line-height: 1.4;
text-align: center;
}
.mobile-operation-card,
.movim-panel button,
.movim-panel select,
.movim-panel input,
.movim-panel textarea,
#modalAcoesProdutoOverlay button,
#modalAcoesProdutoOverlay input {
touch-action: manipulation;
}
.mobile-operation-card:focus-visible,
.movim-panel button:focus-visible,
.movim-panel select:focus-visible,
.movim-panel input:focus-visible,
.movim-panel textarea:focus-visible,
#modalAcoesProdutoOverlay button:focus-visible,
#modalAcoesProdutoOverlay input:focus-visible {
outline: 3px solid #60a5fa;
outline-offset: 2px;
}
.movim-field-label {
font-size: .82rem;
color: #9ca3af;
}
.movim-stock-controls button {
align-items: center;
display: inline-flex;
gap: 7px;
justify-content: center;
}
.movim-qtd-support {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 20px;
}
.movim-helper {
color: #7f8aa3;
font-size: .78rem;
}
body.mobile-modal-open {
overflow: hidden;
}
@keyframes mobileSheetIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 900px) and (max-height: 500px) {
.mobile-operations-home {
max-width: 760px;
}
.mobile-operations-home > p {
margin-bottom: 12px;
}
.mobile-operations-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mobile-operation-card {
min-height: 84px !important;
}
.mobile-operation-card-primary {
grid-column: 1 / -1;
}
.mobile-operation-card:not(.mobile-operation-card-primary) .mobile-operation-copy small {
display: none;
}
}
.produto-edicao-secao {
min-width: 0;
margin: 0;
padding: 12px;
border: 1px solid #dbe4ee;
border-radius: 8px;
background: #f8fafc;
display: grid;
gap: 10px;
}
.produto-edicao-secao > legend {
padding: 0 6px;
color: #334155;
font-size: 12px;
font-weight: 800;
}
.produto-edicao-secao > legend i {
width: 15px;
margin-right: 3px;
color: #2563eb;
text-align: center;
}
.produto-edicao-secao__intro {
color: #64748b;
font-size: 11px;
line-height: 1.4;
}
.produto-edicao-grid-2 {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.produto-edicao-label {
min-width: 0;
display: grid;
gap: 5px;
color: #475569;
font-size: 12px;
font-weight: 700;
}
.produto-edicao-secao--foto {
border-style: dashed;
border-color: #93c5fd;
background: #eff6ff;
color: #1d4ed8;
text-align: center;
}
.produto-edicao-form {
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: start;
}
.produto-edicao-secao--basica,
.produto-edicao-salvar-wrap,
#modalEditarRapidoStatus {
grid-column: 1 / -1;
}
.produto-edicao-foto-acoes {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 10px;
}
.produto-edicao-salvar-wrap {
position: sticky;
bottom: 0;
z-index: 4;
padding: 12px 0 max(4px, env(safe-area-inset-bottom));
border-top: 1px solid #dbe4ee;
background: rgba(255, 255, 255, .96);
}
#modalEditarRapidoSalvar {
width: 100%;
min-height: 48px;
border: 0;
border-radius: 8px;
background: #16a34a;
color: #fff;
font-size: 14px;
font-weight: 800;
cursor: pointer;
}
.produto-edicao-fila {
position: fixed;
right: 18px;
bottom: max(18px, env(safe-area-inset-bottom));
z-index: 10050;
width: min(360px, calc(100vw - 32px));
padding: 12px 14px;
border: 1px solid #bae6fd;
border-radius: 8px;
background: #f0f9ff;
box-shadow: 0 16px 40px rgba(15, 23, 42, .2);
color: #0f172a;
font-size: 12px;
}
.produto-edicao-fila[data-error="true"] {
border-color: #fecaca;
background: #fef2f2;
color: #991b1b;
}
@media (max-width: 760px) {
.produto-edicao-form {
grid-template-columns: minmax(0, 1fr);
}
.produto-edicao-secao--basica,
.produto-edicao-salvar-wrap,
#modalEditarRapidoStatus {
grid-column: auto;
}
#modalAcoesProdutoBox {
max-height: 100dvh !important;
border-radius: 0 !important;
}
#modalAcoesEditarRapido {
padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
}
}
@media (min-width: 641px) and (max-width: 1024px) {
#listaProdutos #listaProdutosGrid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.movim-panel {
width: min(680px, calc(100vw - 32px));
max-height: calc(100dvh - 24px - env(safe-area-inset-bottom, 0px));
padding-bottom: calc(24px + 80px + env(safe-area-inset-bottom, 0px));
scroll-padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
}
.movim-executar-btn {
position: sticky;
bottom: calc(80px + env(safe-area-inset-bottom, 0px));
z-index: 6;
min-height: 48px;
margin-top: 8px;
box-shadow: 0 -10px 28px rgba(0, 0, 0, .42);
}
}
@media (max-width: 640px), (max-width: 900px) and (max-height: 500px) {
:root {
--mobile-gutter: 16px;
--mobile-touch: 48px;
--mobile-surface: #171b26;
--mobile-surface-raised: #202633;
--mobile-border: #30394a;
--mobile-text: #f8fafc;
--mobile-muted: #a8b3c5;
--mobile-accent: #22c55e;
}
/* No celular, a home vira uma central das �reas j� preparadas. */
#paginaInicio .content-wrapper {
min-height: calc(100dvh - 58px);
/* Espaço para o hamburger fixo (left-side ~66px + botão 44px) não cobrir o título */
padding: 56px var(--mobile-gutter) calc(28px + env(safe-area-inset-bottom));
}
#paginaInicio .content-wrapper > :not(.mobile-operations-home) {
display: none !important;
}
.mobile-operations-home {
display: block;
width: 100%;
max-width: 520px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.mobile-operations-eyebrow {
color: #86efac;
font-size: 12px;
font-weight: 800;
letter-spacing: .12em;
margin-bottom: 8px;
text-transform: uppercase;
}
.mobile-operations-home h1 {
color: var(--mobile-text);
font-size: clamp(24px, 7vw, 30px);
line-height: 1.15;
margin: 0;
}
.mobile-operations-home > p {
color: var(--mobile-muted);
font-size: 15px;
line-height: 1.5;
margin: 8px 0 22px;
}
.mobile-operations-grid {
display: grid;
gap: 12px;
}
.mobile-operations-empty {
display: none;
margin: 0 0 8px;
padding: 14px 16px;
border-radius: 8px;
border: 1px dashed rgba(148, 163, 184, .35);
color: var(--mobile-muted);
font-size: 14px;
line-height: 1.45;
}
.mobile-operations-home.is-empty .mobile-operations-grid {
display: none;
}
.mobile-operations-home.is-empty .mobile-operations-empty {
display: block;
}
.mobile-operations-home.is-empty #mobileOperationsSubtitle {
display: none;
}
/* Com Relatórios padrão (ou outros cards), esconde o aviso de vazio */
.mobile-operations-home:not(.is-empty) .mobile-operations-empty {
display: none !important;
}
.mobile-operation-card {
width: 100%;
min-height: 96px;
display: grid;
grid-template-columns: 48px minmax(0, 1fr) 20px;
align-items: center;
gap: 14px;
padding: 16px;
border: 1px solid var(--border-color, var(--mobile-border));
border-radius: 8px;
background: var(--content-bg, var(--mobile-surface-raised));
color: var(--theme-color, var(--mobile-text));
cursor: pointer;
text-align: left;
transition: border-color 180ms ease, background 180ms ease, transform 120ms ease;
}
.mobile-operation-card-primary {
border-color: rgba(34, 197, 94, .58);
background: linear-gradient(110deg, rgba(34, 197, 94, .15), rgba(34, 197, 94, .04));
}
.mobile-operation-card:active {
transform: scale(.98);
}
.mobile-operation-icon {
width: 48px;
height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background: rgba(59, 130, 246, .14);
color: #93c5fd;
font-size: 20px;
}
.mobile-operation-card-primary .mobile-operation-icon {
background: rgba(34, 197, 94, .16);
color: #86efac;
}
.mobile-operation-copy {
min-width: 0;
display: grid;
gap: 5px;
}
.mobile-operation-copy strong {
color: inherit;
font-size: 16px;
line-height: 1.3;
}
.mobile-operation-copy small {
color: var(--mobile-muted);
font-size: 13px;
line-height: 1.4;
}
.mobile-operation-chevron {
color: #64748b;
font-size: 13px;
justify-self: end;
}
.mobile-operations-note {
display: flex;
align-items: flex-start;
gap: 9px;
margin-top: 20px;
padding: 12px;
border-radius: 8px;
background: rgba(148, 163, 184, .08);
color: var(--mobile-muted);
font-size: 12px;
line-height: 1.45;
}
.mobile-operations-note i {
margin-top: 2px;
}
/* Menu lateral no celular: todos os botões liberados (perm-hidden continua valendo). */
#sidebarContent {
width: min(300px, calc(100vw - 56px));
max-height: calc(100dvh - 88px);
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
#sidebarContent .side-menu a {
min-height: var(--mobile-touch);
display: flex;
align-items: center;
}
#sidebarContent .side-title {
font-size: 12px;
letter-spacing: .04em;
padding-top: 10px;
}
.sidebar-hamburger {
width: 44px;
height: 44px;
}
.shortcut-items-container {
display: none !important;
}
/* A lista usa o scroll da p�gina, evitando duas barras concorrentes. */
#listaProdutos .content-wrapper {
padding: 10px var(--mobile-gutter)
calc(24px + env(safe-area-inset-bottom, 0px) + var(--mobile-browser-bottom, 120px));
scroll-padding-bottom: calc(
24px + env(safe-area-inset-bottom, 0px) + var(--mobile-browser-bottom, 120px)
);
}
#listaProdutos .lista-produtos-alta {
padding: 0;
}
#listaProdutos #listaProdutosGrid {
max-height: none !important;
overflow: visible !important;
grid-auto-rows: auto !important;
}
#listaProdutos button[onclick*="abrirModalAcoesProduto"] {
min-height: 44px !important;
padding: 10px 12px !important;
}
#listaProdutos .lp-tabs-nav {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-bottom: 12px;
}
#listaProdutos .lp-tab-btn {
min-width: 0;
min-height: var(--mobile-touch);
padding: 8px 10px;
justify-content: center;
text-align: center;
white-space: normal;
line-height: 1.25;
}
#listaProdutos .lp-tab-count {
flex: 0 0 auto;
}
#listaProdutos .lp-tab-btn[data-lp-tab="kanbanSolicitacoesConteudo"] {
display: none !important;
}
#listaProdutos .filter-bar {
position: sticky;
top: 58px;
z-index: 40;
padding: 8px 0;
background: var(--theme-bg-color, #11151f);
}
#listaProdutos .filter-bar input {
min-height: var(--mobile-touch);
font-size: 16px;
}
#listaProdutos .filter-icon {
min-width: 0;
min-height: var(--mobile-touch);
flex: 1 1 0;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
padding: 6px 8px;
}
#listaProdutos .filter-bar > .filter-icon {
max-width: none;
}
#listaProdutos .mobile-filter-label {
display: inline;
font-size: 11px;
line-height: 1;
}
/* A��es do produto: bottom sheet confort�vel para o polegar. */
/* Tela de separação no mobile: empilha as colunas para leitura e toque. */
#listaProdutos #solicitacoesConteudo #solicitacoesKanbanBoard,
#listaProdutos #kanbanSolicitacoesConteudo #kanbanSolicBoard {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 12px !important;
overflow-x: hidden !important;
}
#listaProdutos #solicitacoesConteudo #solicitacoesKanbanBoard > div,
#listaProdutos #kanbanSolicitacoesConteudo #kanbanSolicBoard > div {
width: 100% !important;
min-width: 0 !important;
flex: none !important;
}
#listaProdutos #solicitacoesConteudo #solicitacoesKanbanBoard > div > div,
#listaProdutos #kanbanSolicitacoesConteudo #kanbanSolicBoard > div > div {
min-height: 0 !important;
max-height: none !important;
}
/* Modal de separação: mais confortável no celular e sem cards espremidos. */
#modalSeparacaoLogistica {
align-items: flex-end !important;
padding: 0 !important;
background: rgba(0, 0, 0, .78) !important;
}
#modalSeparacaoLogistica > div {
width: 100% !important;
max-width: none !important;
height: 100dvh !important;
max-height: 100dvh !important;
border-radius: 0 !important;
}
#modalSeparacaoLogistica #modalSepInner {
padding-bottom: 12px !important;
}
#modalSeparacaoLogistica #modalSepItemsList [data-item-row] {
display: grid !important;
grid-template-columns: 40px minmax(0, 1fr) !important;
gap: 10px !important;
align-items: start !important;
padding: 10px 12px !important;
}
#modalSeparacaoLogistica #modalSepItemsList [data-item-row] > :nth-child(3),
#modalSeparacaoLogistica #modalSepItemsList [data-item-row] > :nth-child(4) {
grid-column: 1 / -1 !important;
width: 100% !important;
justify-self: stretch !important;
}
#modalSeparacaoLogistica #modalSepItemsList [data-item-row] > :nth-child(4) {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 6px !important;
}
#modalSeparacaoLogistica #modalSepItemsList [data-item-row] > :nth-child(4) button {
min-height: 34px !important;
font-size: .64rem !important;
white-space: normal !important;
line-height: 1.15 !important;
}
#modalSeparacaoLogistica #modalSepItemsList .armazem-btn {
font-size: .62rem !important;
line-height: 1.25 !important;
}
#modalSeparacaoLogistica #modalSepItemsList [data-item-row] [style*="background:#101826"],
#modalSeparacaoLogistica #modalSepItemsList [data-item-row] [style*="background:#1b1730"] {
min-width: 0 !important;
}
#modalAcoesProdutoOverlay {
align-items: flex-end !important;
padding: 0 !important;
}
#modalAcoesProdutoBox.produto-acoes-panel {
width: 100% !important;
max-width: none !important;
max-height: min(92dvh, 720px) !important;
border-radius: 16px 16px 0 0 !important;
padding-bottom: env(safe-area-inset-bottom);
animation: mobileSheetIn 220ms ease-out !important;
}
.produto-acoes-header {
position: sticky;
top: 0;
z-index: 2;
padding: 16px !important;
background: #fff;
}
#modalAcoesDescricao {
max-width: calc(100vw - 90px) !important;
}
#modalAcoesFechar {
width: var(--mobile-touch);
height: var(--mobile-touch);
flex: 0 0 var(--mobile-touch);
border-radius: 50% !important;
}
#modalAcoesBotoes,
#modalAcoesManuais {
padding: 14px 16px 20px !important;
}
.produto-acoes-primary-grid {
grid-template-columns: minmax(0, 1fr) 88px !important;
}
.produto-acoes-primary-grid > :nth-child(3) {
grid-column: 1 / -1;
}
#modalAcoesBotoes button,
#modalAcoesBotoes input,
#modalAcoesManuais button,
#modalAcoesManuais input {
min-height: var(--mobile-touch) !important;
font-size: 14px !important;
}
/* Movimenta��o: tela operacional inteira, sem modal espremido. */
.movim-overlay {
align-items: flex-end;
padding: 0;
background: rgba(4, 7, 12, .84);
}
.movim-panel {
width: 100%;
height: 100dvh;
max-height: 100dvh;
min-height: 0;
border: 0;
border-radius: 0;
padding: 0 var(--mobile-gutter) calc(96px + env(safe-area-inset-bottom, 0px));
gap: 14px;
box-shadow: none;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
animation: mobileSheetIn 220ms ease-out;
}
.movim-header {
position: sticky;
top: 0;
z-index: 5;
margin: 0 calc(var(--mobile-gutter) * -1);
padding: calc(12px + env(safe-area-inset-top)) var(--mobile-gutter) 12px;
background: #1a1d27;
border-bottom-color: var(--mobile-border);
}
.movim-header-info {
min-width: 0;
}
.movim-titulo {
font-size: 16px;
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.movim-subtitulo {
color: var(--mobile-muted);
font-size: 12px;
}
.movim-close {
width: var(--mobile-touch);
height: var(--mobile-touch);
flex: 0 0 var(--mobile-touch);
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
.movim-stock-row {
gap: 10px;
}
.movim-stock-badge {
flex-basis: 100%;
padding: 12px 14px;
border-radius: 8px;
font-size: 18px;
}
.movim-stock-controls {
width: 100%;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.movim-btn-hist,
.movim-btn-comp,
.movim-btn-print {
min-width: 0;
min-height: var(--mobile-touch);
padding: 8px 5px;
border-radius: 8px;
font-size: 12px;
}
.movim-field {
gap: 7px;
}
.movim-field label,
.movim-field-label {
color: #c2cad8;
font-size: 13px;
font-weight: 650;
}
.movim-field select,
.movim-field input:not([type="checkbox"]):not([type="radio"]),
.movim-field textarea {
width: 100%;
min-height: var(--mobile-touch);
box-sizing: border-box;
padding: 12px;
border-radius: 8px;
font-size: 16px;
}
.movim-imprimir-wrap input[type="checkbox"] {
width: 20px;
height: 20px;
min-width: 20px;
min-height: 20px;
max-width: 20px;
max-height: 20px;
flex: 0 0 20px;
}
.movim-executar-btn {
position: sticky;
bottom: calc(80px + env(safe-area-inset-bottom, 0px));
z-index: 6;
min-height: var(--mobile-touch);
border-radius: 8px;
font-size: 15px;
box-shadow: 0 -10px 28px rgba(0, 0, 0, .42);
}
.movim-field textarea {
min-height: 82px;
}
.movim-tipo {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.movimTipoBtn {
min-width: 0;
min-height: var(--mobile-touch);
padding: 8px 4px;
border-radius: 8px;
font-size: 12px;
text-transform: none;
}
#movimOperadores {
gap: 8px;
}
#movimOperadores button {
min-height: var(--mobile-touch);
padding: 8px;
border-radius: 8px;
font-size: 20px;
}
.movim-enderecos {
padding: 12px;
border-radius: 8px;
}
.movim-endereco-add {
min-height: var(--mobile-touch);
padding: 8px 12px;
border-radius: 8px;
}
.movim-endereco-item {
min-height: 48px;
box-sizing: border-box;
}
.movim-endereco-item button {
min-width: 44px;
min-height: 44px;
}
.movim-mensagem:not(:empty) {
min-height: 0;
padding: 10px 12px;
border-radius: 8px;
background: rgba(148, 163, 184, .08);
}
.movim-acoes {
position: sticky;
bottom: calc(-12px - env(safe-area-inset-bottom));
z-index: 5;
margin: 4px calc(var(--mobile-gutter) * -1) 0;
padding: 12px var(--mobile-gutter) calc(12px + env(safe-area-inset-bottom));
background: #1a1d27;
border-top: 1px solid var(--mobile-border);
gap: 10px;
}
.movim-acoes button {
min-height: var(--mobile-touch);
padding: 10px;
border-radius: 8px;
font-size: 15px;
}
.ppicker-fechar,
.ppicker-voltar,
.ppicker-front-cell {
min-height: 44px;
}
/* Identifica��o: preserva a lista densa, mas torna todos os controles toc�veis. */
#etiquetasModal {
align-items: stretch !important;
padding: 0 !important;
overflow: hidden !important;
}
#etiquetasModal .etiquetas-modal-box {
width: 100vw !important;
max-width: none !important;
height: 100dvh !important;
margin: 0 !important;
border-width: 0 !important;
border-radius: 0 !important;
}
#etiquetasModal .etiquetas-modal-header {
padding: calc(10px + env(safe-area-inset-top)) 16px 10px !important;
}
#etiquetasModal .etiquetas-modal-close,
#etiquetasModal .etq-view-btn {
width: 44px !important;
height: 44px !important;
min-width: 44px;
min-height: 44px;
}
#etiquetasModal .etiquetas-modal-search-row {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px !important;
padding: 10px 16px !important;
}
#etiquetasModal .etiquetas-search-wrap {
min-height: 48px;
box-sizing: border-box;
}
#etiquetasModal .etiquetas-search-wrap input {
width: 100%;
min-width: 0;
min-height: 44px;
font-size: 16px !important;
}
#etiquetasModal .etq-view-toggle {
min-height: 48px;
}
#etiquetasModal .etq-impressora-row {
padding: 8px 16px !important;
gap: 8px !important;
}
#etiquetasModal .etq-listbox-impressora {
min-width: 0;
min-height: 44px;
font-size: 16px !important;
}
#etiquetasModal .etiquetas-grid {
flex: 1;
min-height: 0;
max-height: none !important;
padding: 10px 16px calc(16px + env(safe-area-inset-bottom)) !important;
overscroll-behavior: contain;
}
#etiquetasModal .etiquetas-grid.view-list .etq-card {
min-height: 64px !important;
}
#etiquetasModal .etiquetas-grid.view-list .etq-card-actions {
padding: 8px 8px 8px 0 !important;
gap: 6px !important;
}
#etiquetasModal .etq-btn-imprimir-unit,
#etiquetasModal .etq-btn-multiplo,
#etiquetasModal .etq-btn-ocultar,
#etiquetasModal .etq-btn-reimprimir,
#etiquetasModal .etq-btn-armazenar {
min-height: 44px !important;
padding: 7px 10px !important;
}
}
.light-mode .mobile-operation-card {
background: #fff;
color: #0f172a;
border-color: #dbe3ec;
}
.light-mode .mobile-operation-card-primary {
border-color: rgba(5, 150, 105, .45);
background: linear-gradient(110deg, rgba(5, 150, 105, .10), #fff);
}
.light-mode .mobile-operations-note {
background: #eef2f7;
color: #475569;
}
@media (prefers-reduced-motion: reduce) {
.mobile-operation-card,
.movim-panel,
#modalAcoesProdutoBox.produto-acoes-panel {
animation: none !important;
transition: none !important;
}
}
/* Gestão de endereços por produto */
.produto-enderecos-overlay {
position: fixed;
inset: 0;
z-index: 10040;
display: none;
align-items: center;
justify-content: center;
padding: 20px;
background: rgba(3, 7, 18, .78);
backdrop-filter: blur(4px);
}
.produto-enderecos-overlay.is-open { display: flex; }
.produto-enderecos-panel {
width: min(920px, 96vw);
max-height: min(820px, 92dvh);
display: flex;
flex-direction: column;
overflow: hidden;
color: #e5e7eb;
background: #141821;
border: 1px solid #30394a;
border-radius: 16px;
box-shadow: 0 28px 80px rgba(0, 0, 0, .55);
}
.produto-enderecos-header {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px 18px;
border-bottom: 1px solid #2b3342;
background: #171c26;
}
.produto-enderecos-heading { display: flex; align-items: center; gap: 12px; min-width: 0; }
.produto-enderecos-icon,
.produto-endereco-pin {
flex: 0 0 42px;
width: 42px;
height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #fff;
background: #ff5a4f;
border-radius: 12px;
}
.produto-enderecos-heading h2 { margin: 0; color: #fff; font-size: 17px; line-height: 1.25; }
.produto-enderecos-heading p { margin: 4px 0 0; color: #8994a8; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.produto-enderecos-close,
.produto-enderecos-scanner header button {
flex: 0 0 44px;
width: 44px;
height: 44px;
border: 0;
border-radius: 12px;
color: #cbd5e1;
background: #252c38;
cursor: pointer;
}
.produto-enderecos-body { min-height: 0; overflow-y: auto; padding: 16px 18px 20px; }
.produto-enderecos-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.produto-enderecos-summary > div { padding: 12px 14px; background: #1c2330; border: 1px solid #30394a; border-radius: 12px; }
.produto-enderecos-summary span { display: block; color: #8994a8; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.produto-enderecos-summary strong { display: block; margin-top: 5px; color: #fff; font-size: 20px; }
.produto-enderecos-aviso { margin-bottom: 12px; padding: 10px 12px; border: 1px solid #475569; border-radius: 10px; color: #cbd5e1; background: #1e293b; font-size: 13px; }
.produto-enderecos-aviso.is-error { color: #fecaca; border-color: #7f1d1d; background: rgba(127, 29, 29, .24); }
.produto-enderecos-aviso.is-success { color: #bbf7d0; border-color: #166534; background: rgba(22, 101, 52, .22); }
.produto-enderecos-lista { display: grid; gap: 10px; }
.produto-enderecos-loading,
.produto-enderecos-empty { min-height: 210px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; color: #8994a8; text-align: center; }
.produto-enderecos-empty i { color: #ff5a4f; font-size: 28px; }
.produto-enderecos-empty strong { color: #e5e7eb; font-size: 15px; }
.produto-enderecos-empty span { max-width: 420px; font-size: 13px; }
.produto-endereco-card { overflow: hidden; background: #1a202b; border: 1px solid #323b4c; border-radius: 13px; }
.produto-endereco-card.is-empty { border-style: dashed; }
.produto-endereco-main { display: grid; grid-template-columns: 42px minmax(180px, 1fr) minmax(170px, auto); align-items: center; gap: 12px; padding: 13px; }
.produto-endereco-pin { color: #67e8f9; background: #12313b; }
.produto-endereco-info,
.produto-endereco-saldo { min-width: 0; }
.produto-endereco-info span,
.produto-endereco-saldo span { display: block; color: #8994a8; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.produto-endereco-info strong,
.produto-endereco-saldo strong { display: block; margin-top: 3px; color: #f8fafc; font-size: 15px; overflow-wrap: anywhere; }
.produto-endereco-info small,
.produto-endereco-saldo small { display: block; margin-top: 3px; color: #7f8aa3; font-size: 11px; }
.produto-endereco-saldo { text-align: right; }
.produto-endereco-saldo strong { color: #5eead4; font-variant-numeric: tabular-nums; }
.produto-endereco-card.is-empty .produto-endereco-saldo strong { color: #94a3b8; }
.produto-endereco-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 0 13px 13px; }
.produto-endereco-actions button,
.produto-endereco-transfer-actions button,
.produto-endereco-transfer-input button {
min-height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: 9px 13px;
border: 1px solid #3b4659;
border-radius: 10px;
color: #dbeafe;
background: #263044;
font-size: 12px;
font-weight: 750;
cursor: pointer;
}
.produto-endereco-actions button.is-danger { color: #fecaca; border-color: #7f1d1d; background: rgba(127, 29, 29, .25); }
.produto-endereco-actions button:disabled { opacity: .38; cursor: not-allowed; }
.produto-endereco-transfer,
.produto-endereco-caixa { padding: 14px; border-top: 1px solid #30394a; background: #111722; }
.produto-endereco-transfer[hidden],
.produto-endereco-caixa[hidden] { display: none; }
.produto-endereco-transfer label { display: block; color: #cbd5e1; font-size: 12px; font-weight: 750; }
.produto-endereco-transfer-fields { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(220px, .65fr); gap: 12px; }
.produto-endereco-transfer-fields label > small { display: block; margin-top: 6px; color: #8994a8; font-size: 10px; font-weight: 600; }
.produto-endereco-transfer-input { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.produto-endereco-transfer-input input,
.produto-endereco-transfer-quantity input,
.produto-enderecos-scanner input { min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px solid #445066; border-radius: 10px; outline: none; color: #f8fafc; background: #1a202b; font-size: 15px; }
.produto-endereco-transfer-input input:focus,
.produto-endereco-transfer-quantity input:focus,
.produto-enderecos-scanner input:focus { border-color: #38bdf8; box-shadow: 0 0 0 3px rgba(56, 189, 248, .16); }
.produto-endereco-transfer-input,
.produto-endereco-transfer-quantity { margin-top: 7px; }
.produto-endereco-transfer-quantity { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: stretch; gap: 7px; }
.produto-endereco-transfer-quantity > span { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; padding: 0 8px; border: 1px solid #445066; border-radius: 10px; color: #94a3b8; background: #171c26; font-size: 11px; font-weight: 800; }
.produto-endereco-transfer-quantity > button { min-height: 44px; padding: 8px 10px; border: 1px solid #3b4659; border-radius: 10px; color: #bae6fd; background: #263044; font-size: 11px; font-weight: 800; cursor: pointer; }
.produto-endereco-transfer p { margin: 9px 0 12px; color: #8994a8; font-size: 11px; }
.produto-endereco-transfer-actions { display: flex; justify-content: flex-end; gap: 8px; }
.produto-endereco-transfer-actions button.is-primary { color: #fff; border-color: #ff5a4f; background: #ff5a4f; }
.produto-endereco-caixa-heading { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 13px; }
.produto-endereco-caixa-heading > i { flex: 0 0 36px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; color: #5eead4; background: #12313b; border-radius: 10px; }
.produto-endereco-caixa-heading strong,
.produto-endereco-caixa-heading span { display: block; }
.produto-endereco-caixa-heading strong { color: #f8fafc; font-size: 13px; }
.produto-endereco-caixa-heading span { margin-top: 3px; color: #8994a8; font-size: 11px; line-height: 1.45; }
.produto-endereco-caixa-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, .38fr); gap: 10px; }
.produto-endereco-caixa-editor label,
.produto-endereco-caixa-printer { display: grid; gap: 6px; color: #cbd5e1; font-size: 11px; font-weight: 750; }
.produto-endereco-caixa-editor input,
.produto-endereco-caixa-printer select { width: 100%; min-width: 0; min-height: 44px; padding: 9px 11px; border: 1px solid #445066; border-radius: 10px; outline: none; color: #f8fafc; background: #1a202b; font-size: 14px; }
.produto-endereco-caixa-editor input[readonly] { color: #94a3b8; background: #171c26; }
.produto-endereco-caixa-editor input:focus,
.produto-endereco-caixa-printer select:focus { border-color: #5eead4; box-shadow: 0 0 0 3px rgba(94, 234, 212, .14); }
.produto-endereco-caixa-preview { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 0; padding: 10px 12px; border: 1px solid #354055; border-radius: 10px; background: #171c26; }
.produto-endereco-caixa-preview span { color: #8994a8; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.produto-endereco-caixa-preview strong { color: #fca5a5; font-size: 16px; font-variant-numeric: tabular-nums; }
.produto-endereco-caixa-preview strong.is-valid { color: #5eead4; }
.produto-endereco-caixa-print { display: flex; align-items: center; gap: 10px; margin: 10px 0; padding: 10px 12px; border: 1px solid #354055; border-radius: 10px; color: #e2e8f0; background: #171c26; cursor: pointer; }
.produto-endereco-caixa-print input { flex: 0 0 18px; width: 18px; height: 18px; accent-color: #14b8a6; }
.produto-endereco-caixa-print span,
.produto-endereco-caixa-print strong,
.produto-endereco-caixa-print small { display: block; }
.produto-endereco-caixa-print strong { font-size: 12px; }
.produto-endereco-caixa-print small { margin-top: 2px; color: #8994a8; font-size: 10px; font-weight: 500; }
.produto-endereco-caixa-printer { margin: 10px 0 13px; }
.produto-endereco-caixa-printer[hidden] { display: none; }
.produto-enderecos-scanner { position: fixed; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(3, 7, 18, .9); }
.produto-enderecos-scanner[hidden] { display: none; }
.produto-enderecos-scanner-panel { width: min(520px, 96vw); overflow: hidden; color: #e5e7eb; background: #141821; border: 1px solid #354055; border-radius: 16px; }
.produto-enderecos-scanner header { display: flex; justify-content: space-between; gap: 12px; padding: 14px; }
.produto-enderecos-scanner header strong,
.produto-enderecos-scanner header span { display: block; }
.produto-enderecos-scanner header span { margin-top: 3px; color: #8994a8; font-size: 12px; }
.produto-enderecos-camera { position: relative; min-height: 280px; overflow: hidden; background: #05070a; }
.produto-enderecos-camera video { width: 100%; height: 100%; min-height: 280px; object-fit: cover; }
.produto-enderecos-mira { position: absolute; top: 50%; left: 50%; width: 82%; height: 88px; border: 2px solid #5eead4; border-radius: 10px; transform: translate(-50%, -50%); box-shadow: 0 0 0 999px rgba(0, 0, 0, .24); }
.produto-enderecos-scanner-status { margin: 0; padding: 11px 14px 0; color: #94a3b8; font-size: 12px; }
.produto-enderecos-scanner-status.is-error { color: #fca5a5; }
.produto-enderecos-scanner-status.is-warning { color: #fcd34d; }
.produto-enderecos-scanner label { display: block; padding: 12px 14px 16px; color: #cbd5e1; font-size: 12px; font-weight: 700; }
.produto-enderecos-scanner label > div { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 7px; }
.produto-enderecos-scanner [data-scanner-use] { min-width: 76px; border: 0; border-radius: 10px; color: #fff; background: #ff5a4f; font-weight: 800; cursor: pointer; }
@media (max-width: 760px) {
.produto-enderecos-overlay { align-items: flex-end; padding: 0; }
.produto-enderecos-panel { width: 100%; max-height: 100dvh; height: 100dvh; border: 0; border-radius: 0; }
.produto-enderecos-header { padding: calc(10px + env(safe-area-inset-top)) 12px 10px; }
.produto-enderecos-heading p { max-width: calc(100vw - 112px); }
.produto-enderecos-body { padding: 12px 12px calc(24px + env(safe-area-inset-bottom)); }
.produto-enderecos-summary strong { font-size: 17px; }
.produto-endereco-main { grid-template-columns: 38px 1fr; gap: 10px; }
.produto-endereco-pin { width: 38px; height: 38px; flex-basis: 38px; }
.produto-endereco-saldo { grid-column: 2; text-align: left; padding-top: 8px; border-top: 1px solid #30394a; }
.produto-endereco-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.produto-endereco-actions .is-danger { grid-column: 1 / -1; }
.produto-endereco-actions button { min-height: 46px; }
.produto-endereco-transfer-input { grid-template-columns: minmax(0, 1fr) 82px; }
.produto-endereco-transfer-fields { grid-template-columns: 1fr; }
.produto-endereco-transfer-quantity { grid-template-columns: minmax(0, 1fr) auto; }
.produto-endereco-transfer-quantity > button { grid-column: 1 / -1; }
.produto-endereco-transfer-actions { display: grid; grid-template-columns: 1fr; }
.produto-endereco-transfer-actions button.is-primary { grid-row: 1; min-height: 48px; }
.produto-endereco-caixa-editor { grid-template-columns: 1fr; }
.produto-endereco-caixa-preview { align-items: flex-start; flex-direction: column; }
.produto-enderecos-scanner { align-items: flex-end; padding: 0; }
.produto-enderecos-scanner-panel { width: 100%; max-height: 100dvh; border-radius: 16px 16px 0 0; padding-bottom: env(safe-area-inset-bottom); }
.produto-enderecos-camera,
.produto-enderecos-camera video { min-height: min(46dvh, 380px); }
}
@media (min-width: 761px) and (max-width: 1024px) {
.produto-enderecos-panel { width: min(760px, 95vw); }
}
@media (prefers-reduced-motion: reduce) {
.produto-enderecos-panel,
.produto-enderecos-scanner-panel { animation: none !important; }
}
/* Compras workspace v3: separates daily work from archival volume. */
.compras-board-overview {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
margin: 0 0 16px;
padding: 6px 0 14px;
border-bottom: 1px solid var(--cp-border-soft);
}
.compras-board-tabs {
display: inline-flex;
gap: 4px;
padding: 4px;
background: var(--cp-panel);
border: 1px solid var(--cp-border);
border-radius: 9px;
}
.compras-board-tab {
min-height: 36px;
padding: 0 13px;
color: var(--cp-muted);
background: transparent;
border: 0;
border-radius: 6px;
font-family: "Poppins", sans-serif;
font-size: 12px;
font-weight: 600;
cursor: pointer;
}
.compras-board-tab i { margin-right: 6px; }
.compras-board-tab:hover { color: var(--cp-text); }
.compras-board-tab.is-active {
color: #fff;
background: var(--cp-accent);
box-shadow: 0 3px 10px rgba(0, 0, 0, .14);
}
.compras-board-metrics {
display: flex;
align-items: center;
gap: 8px;
color: var(--cp-muted);
font-size: 11px;
}
.compras-board-metrics span {
padding: 6px 9px;
background: var(--cp-panel);
border: 1px solid var(--cp-border-soft);
border-radius: 6px;
white-space: nowrap;
}
.compras-board-metrics strong {
color: var(--cp-text);
font-family: "Montserrat", sans-serif;
font-size: 12px;
}
#minhasComprasWrapper[data-board-view="ativas"] .kanban-column-minhas[data-status="concluído"],
#minhasComprasWrapper[data-board-view="ativas"] .kanban-column-minhas[data-status="concluido"] {
display: none !important;
}
#minhasComprasWrapper[data-board-view="historico"] .kanban-column-minhas:not([data-status="concluído"]):not([data-status="concluido"]) {
display: none !important;
}
/* Pai do board: permite a barra horizontal aparecer */
#comprasFormPane .content-wrapper,
#comprasFormPane .content-section,
#minhasComprasWrapper {
min-width: 0;
max-width: 100%;
overflow-x: visible;
}
#kanbanMinhasSolicitacoes.kanban-container {
gap: 18px !important;
background: transparent;
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
overflow-y: hidden !important;
width: 100% !important;
max-width: 100% !important;
padding-bottom: 16px !important;
-webkit-overflow-scrolling: touch;
scrollbar-gutter: stable;
scrollbar-width: thin;
scrollbar-color: #64748b #e2e8f0;
}
#kanbanMinhasSolicitacoes.kanban-container::-webkit-scrollbar {
height: 12px;
}
#kanbanMinhasSolicitacoes.kanban-container::-webkit-scrollbar-track {
background: #e2e8f0;
border-radius: 6px;
}
#kanbanMinhasSolicitacoes.kanban-container::-webkit-scrollbar-thumb {
background: #64748b;
border-radius: 6px;
}
#kanbanMinhasSolicitacoes.kanban-container::-webkit-scrollbar-thumb:hover {
background: #475569;
}
:root:not(.light-mode) #kanbanMinhasSolicitacoes.kanban-container {
scrollbar-color: #94a3b8 #1e293b;
}
:root:not(.light-mode) #kanbanMinhasSolicitacoes.kanban-container::-webkit-scrollbar-track {
background: #1e293b;
}
:root:not(.light-mode) #kanbanMinhasSolicitacoes.kanban-container::-webkit-scrollbar-thumb {
background: #94a3b8;
}
:root:not(.light-mode) #kanbanMinhasSolicitacoes.kanban-container::-webkit-scrollbar-thumb:hover {
background: #cbd5e1;
}
#kanbanMinhasSolicitacoes .kanban-column-minhas {
flex: 0 0 336px !important;
flex-basis: 336px !important;
min-width: 336px !important;
max-width: 336px !important;
padding: 0 2px 10px !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
overflow: hidden;
}
#kanbanMinhasSolicitacoes .kanban-column-minhas::before { display: none; }
#kanbanMinhasSolicitacoes .kanban-column-minhas > div:first-child {
position: relative;
min-height: 42px;
padding: 10px 10px 11px !important;
background: color-mix(in srgb, var(--cp-stage) 9%, var(--cp-panel));
border: 1px solid color-mix(in srgb, var(--cp-stage) 30%, var(--cp-border));
border-radius: 8px 8px 0 0;
}
#kanbanMinhasSolicitacoes .kanban-column-minhas > div:first-child::before {
content: "";
position: absolute;
left: 0;
top: 9px;
bottom: 9px;
width: 3px;
background: var(--cp-stage);
border-radius: 0 3px 3px 0;
}
#kanbanMinhasSolicitacoes .kanban-column-minhas > div:nth-last-child(2) {
min-height: 0;
margin: 0 !important;
padding: 7px 8px !important;
background: var(--cp-column);
border: 0 !important;
}
#kanbanMinhasSolicitacoes .kanban-cards-minhas {
padding: 10px 8px 16px !important;
background: var(--cp-column);
border-radius: 0 0 8px 8px;
}
#kanbanMinhasSolicitacoes .kanban-card {
padding: 15px !important;
border: 1px solid var(--cp-border-soft) !important;
border-left: 1px solid var(--cp-border-soft) !important;
border-radius: 8px !important;
box-shadow: 0 2px 5px rgba(0, 0, 0, .09) !important;
}
#kanbanMinhasSolicitacoes .kanban-card::before {
content: "";
position: absolute;
left: 0;
top: 13px;
bottom: 13px;
width: 3px;
background: var(--cp-stage);
border-radius: 0 3px 3px 0;
}
#kanbanMinhasSolicitacoes .cp-card-number {
padding-left: 3px;
font-size: 10px !important;
text-transform: uppercase;
}
#kanbanMinhasSolicitacoes .cp-card-supplier {
margin-top: 2px !important;
font-size: 13px !important;
letter-spacing: -.015em;
}
#kanbanMinhasSolicitacoes .cp-card-summary { font-size: 13px !important; }
#minhasComprasWrapper[data-board-view="historico"] #kanbanMinhasSolicitacoes {
overflow-x: hidden !important;
}
#minhasComprasWrapper[data-board-view="historico"] .kanban-column-minhas {
flex: 1 1 100% !important;
min-width: 100% !important;
}
#minhasComprasWrapper[data-board-view="historico"] .kanban-cards-minhas {
display: grid !important;
grid-template-columns: repeat(4, minmax(230px, 1fr));
align-content: start;
gap: 10px !important;
}
@media (max-width: 1200px) {
#minhasComprasWrapper[data-board-view="historico"] .kanban-cards-minhas {
grid-template-columns: repeat(3, minmax(220px, 1fr));
}
}
@media (max-width: 900px) {
.compras-board-overview { align-items: flex-start; flex-direction: column; }
.compras-board-metrics { width: 100%; overflow-x: auto; }
#kanbanMinhasSolicitacoes .kanban-column-minhas {
flex-basis: min(88vw, 350px) !important;
min-width: min(88vw, 350px) !important;
}
#minhasComprasWrapper[data-board-view="historico"] .kanban-cards-minhas {
grid-template-columns: repeat(2, minmax(210px, 1fr));
}
}
@media (max-width: 560px) {
.compras-board-tabs { width: 100%; }
.compras-board-tab { flex: 1; }
#minhasComprasWrapper[data-board-view="historico"] .kanban-cards-minhas {
display: flex !important;
}
}
/* Terceiro passe: contexto das etapas, estados e ações progressivas. */
#minhasComprasWrapper #comprasAlternarVisualizacaoBtn,
#minhasComprasWrapper #comprasFiltrarDataBtn,
#minhasComprasWrapper #comprasGraficoBtn {
display: none !important;
}
#minhasComprasWrapper #kanbanMinhasSolicitacoes .kanban-column-minhas > div:first-child {
min-height: 52px !important;
align-items: flex-start !important;
}
#minhasComprasWrapper #kanbanMinhasSolicitacoes .kanban-column-minhas h3 {
display: block;
min-width: 0;
}
#minhasComprasWrapper #kanbanMinhasSolicitacoes .kanban-column-minhas h3::after {
display: block;
margin: 4px 0 0 16px;
color: #89939d;
font-size: 9px;
font-weight: 400;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#minhasComprasWrapper #kanbanMinhasSolicitacoes .kanban-column-minhas[data-status="analise de cadastro"] h3::after { content: "Itens aguardando validação"; }
#minhasComprasWrapper #kanbanMinhasSolicitacoes .kanban-column-minhas[data-status="aguardando aprovação da requisição"] h3::after { content: "Solicitações aguardando decisão"; }
#minhasComprasWrapper #kanbanMinhasSolicitacoes .kanban-column-minhas[data-status="solicitado revisão"] h3::after { content: "Itens devolvidos para ajuste"; }
#minhasComprasWrapper #kanbanMinhasSolicitacoes .kanban-column-minhas[data-status="aguardando cotação"] h3::after { content: "Itens aguardando propostas"; }
#minhasComprasWrapper #kanbanMinhasSolicitacoes .kanban-column-minhas[data-status="cotado aguardando escolha"] h3::after { content: "Propostas prontas para escolha"; }
#minhasComprasWrapper #kanbanMinhasSolicitacoes .kanban-column-minhas[data-status="aguardando compra preparação"] h3::after { content: "Requisições prontas para compra"; }
#minhasComprasWrapper #kanbanMinhasSolicitacoes .kanban-column-minhas[data-status="compra realizada"] h3::after { content: "Pedidos enviados ao fornecedor"; }
#minhasComprasWrapper #kanbanMinhasSolicitacoes .kanban-column-minhas[data-status="faturada pelo fornecedor"] h3::after { content: "Notas emitidas pelo fornecedor"; }
#minhasComprasWrapper #kanbanMinhasSolicitacoes .kanban-column-minhas[data-status="recebido"] h3::after { content: "Materiais recebidos"; }
#minhasComprasWrapper #kanbanMinhasSolicitacoes .kanban-column-minhas[data-status="concluído"] h3::after { content: "Processos finalizados"; }
#minhasComprasWrapper #kanbanMinhasSolicitacoes .cp-card-number {
padding-right: 24px;
}
#minhasComprasWrapper #kanbanMinhasSolicitacoes .cp-card-date-label {
color: #8a949f !important;
font-size: 9px !important;
font-weight: 600 !important;
}
#minhasComprasWrapper #kanbanMinhasSolicitacoes .cp-card-summary {
flex-wrap: wrap;
row-gap: 5px !important;
}
#minhasComprasWrapper #kanbanMinhasSolicitacoes .cp-card-state {
display: inline-flex;
align-items: center;
min-height: 19px;
margin-left: auto;
padding: 2px 6px;
border-radius: 999px;
font-size: 9px !important;
font-weight: 600 !important;
line-height: 1 !important;
white-space: nowrap;
}
#minhasComprasWrapper #kanbanMinhasSolicitacoes .cp-card-state.is-progress {
color: #315e87 !important;
background: #e8f2fb;
}
#minhasComprasWrapper #kanbanMinhasSolicitacoes .cp-card-state.is-pending {
color: #8a5a13 !important;
background: #fff3d7;
}
#minhasComprasWrapper #kanbanMinhasSolicitacoes .cp-card-state.is-done {
color: #176b57 !important;
background: #ddf3ec;
}
#minhasComprasWrapper #kanbanMinhasSolicitacoes .cp-card-context {
position: absolute;
top: 6px;
right: 6px;
z-index: 5;
}
#minhasComprasWrapper #kanbanMinhasSolicitacoes .cp-card-menu-trigger {
display: grid;
width: 24px;
height: 24px;
padding: 0;
place-items: center;
color: #7a858f;
background: transparent;
border: 0;
border-radius: 50%;
cursor: pointer;
}
#minhasComprasWrapper #kanbanMinhasSolicitacoes .cp-card-menu-trigger:hover,
#minhasComprasWrapper #kanbanMinhasSolicitacoes .cp-card-menu-trigger[aria-expanded="true"] {
color: #20252b;
background: #eef1f4;
}
#minhasComprasWrapper #kanbanMinhasSolicitacoes .cp-card-menu {
position: absolute;
top: 27px;
right: 0;
z-index: 20;
display: none;
width: 154px;
padding: 5px;
background: #fff;
border: 0;
border-radius: 6px;
box-shadow: 0 10px 26px rgba(33, 43, 54, .18);
}
#minhasComprasWrapper #kanbanMinhasSolicitacoes .cp-card-menu.is-open { display: grid; gap: 2px; }
#minhasComprasWrapper #kanbanMinhasSolicitacoes .cp-card-menu button {
display: flex;
align-items: center;
gap: 7px;
width: 100%;
padding: 7px 8px;
color: #37414a;
background: transparent;
border: 0;
border-radius: 4px;
font-size: 11px;
text-align: left;
cursor: pointer;
}
#minhasComprasWrapper #kanbanMinhasSolicitacoes .cp-card-menu button:hover {
color: #20252b;
background: #f1f3f5;
}
@media (max-width: 720px) {
#minhasComprasWrapper .compras-toolbar-actions > .content-button:not(#comprasAtualizarKanbansBtn):not(#comprasAcoesHamburgerBtn) {
display: none !important;
}
}
/* Compras workspace v4: adaptive lanes instead of equal spreadsheet columns. */
#minhasComprasWrapper[data-board-view="ativas"] #kanbanMinhasSolicitacoes {
align-items: flex-start;
padding-top: 6px !important;
}
#minhasComprasWrapper[data-board-view="ativas"] .kanban-column-minhas {
flex: 0 0 260px !important;
min-width: 260px !important;
height: auto;
max-height: 100%;
align-self: flex-start;
}
#minhasComprasWrapper[data-board-view="ativas"] .kanban-column-minhas[data-status="aguardando aprovação da requisição"],
#minhasComprasWrapper[data-board-view="ativas"] .kanban-column-minhas[data-status="analise de cadastro"] {
flex-basis: 250px !important;
min-width: 250px !important;
}
#minhasComprasWrapper[data-board-view="ativas"] .kanban-column-minhas[data-status="aguardando compra preparação"] {
flex-basis: 300px !important;
min-width: 300px !important;
}
#minhasComprasWrapper[data-board-view="ativas"] .kanban-column-minhas[data-status="compra realizada"],
#minhasComprasWrapper[data-board-view="ativas"] .kanban-column-minhas[data-status="faturada pelo fornecedor"],
#minhasComprasWrapper[data-board-view="ativas"] .kanban-column-minhas[data-status="recebido"] {
flex-basis: 370px !important;
min-width: 370px !important;
height: 100%;
align-self: stretch;
}
#minhasComprasWrapper[data-board-view="ativas"] .kanban-column-minhas:has(.kanban-card:nth-child(4)) {
height: 100%;
align-self: stretch;
}
#kanbanMinhasSolicitacoes .kanban-column-minhas > div:first-child {
min-height: 48px;
padding: 13px 13px 12px !important;
}
#kanbanMinhasSolicitacoes .kanban-column-minhas h3 {
font-size: 13px !important;
}
#kanbanMinhasSolicitacoes .kanban-count-minhas {
min-width: 27px;
padding: 4px 8px !important;
font-size: 11px !important;
}
#kanbanMinhasSolicitacoes .kanban-cards-minhas {
gap: 11px !important;
padding: 12px 10px 18px !important;
}
#kanbanMinhasSolicitacoes .kanban-card {
min-height: 88px;
padding: 17px 17px 15px !important;
}
#kanbanMinhasSolicitacoes .cp-card-number {
margin-bottom: 7px !important;
color: var(--cp-muted) !important;
font-size: 12px !important;
font-weight: 700 !important;
}
#kanbanMinhasSolicitacoes .cp-card-supplier {
margin-bottom: 12px !important;
padding: 0 !important;
color: var(--cp-text) !important;
background: transparent !important;
font-size: 14px !important;
line-height: 1.4 !important;
}
#kanbanMinhasSolicitacoes .cp-card-dates {
margin-bottom: 11px !important;
padding-top: 9px !important;
font-size: 11px !important;
}
#kanbanMinhasSolicitacoes .cp-card-requester {
font-size: 11px !important;
}
#kanbanMinhasSolicitacoes .cp-card-summary {
padding-top: 10px !important;
font-size: 14px !important;
}
#kanbanMinhasSolicitacoes .kanban-card button[aria-label="Expandir"] {
width: 34px;
height: 34px;
}
.compras-board-overview {
padding: 9px 0 17px;
}
.compras-board-metrics {
gap: 10px;
}
.compras-board-metrics span {
padding: 8px 11px;
font-size: 12px;
}
.compras-board-metrics strong {
margin-right: 3px;
font-size: 14px;
}
@media (max-width: 900px) {
#minhasComprasWrapper[data-board-view="ativas"] .kanban-column-minhas,
#minhasComprasWrapper[data-board-view="ativas"] .kanban-column-minhas[data-status] {
flex-basis: min(88vw, 360px) !important;
min-width: min(88vw, 360px) !important;
}
}
/* ===================== MOVIMENTA��O RESTAURADA DO ORIGIN/MAIN ===================== */
.movim-endereco-campo-acoes { display: flex; align-items: center; gap: 6px; }
.movim-endereco-rm {
width: 32px;
height: 32px;
border-radius: 8px;
border: 1px solid #4b5563;
background: #1f2937;
color: #f87171;
font-size: 1.2rem;
line-height: 1;
cursor: pointer;
flex-shrink: 0;
}
.movim-endereco-rm:hover { background: #374151; }
.movim-impressora-row {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
padding: 10px 12px;
margin-top: 4px;
background: rgba(15,23,42,.55);
border: 1px solid rgba(51,65,85,.6);
border-radius: 10px;
}
.movim-impressora-row--modal { margin: 0 16px 12px; }
.movim-impressora-row label { color: #94a3b8; font-size: .8rem; white-space: nowrap; flex-shrink: 0; }
.movim-impr-icone { color: #a78bfa; font-size: .85rem; flex-shrink: 0; }
.movim-listbox-impressora {
flex: 1;
min-width: 140px;
background: #1e293b;
color: #f1f5f9;
border: 1px solid #334155;
border-radius: 7px;
padding: 7px 10px;
font-size: .85rem;
outline: none;
cursor: pointer;
}
.movim-listbox-impressora:focus { border-color: #7c3aed; }
.movim-impr-btn-icon {
background: #1e293b;
border: 1px solid #334155;
border-radius: 7px;
color: #94a3b8;
padding: 7px 10px;
cursor: pointer;
flex-shrink: 0;
}
.movim-impr-btn-icon:hover { color: #e2e8f0; border-color: #475569; }
.movim-imp-overlay,
.movim-scan-overlay,
.movim-hist-overlay {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
background: rgba(0,0,0,.82);
backdrop-filter: blur(6px);
}
.movim-imp-overlay { z-index: 10150; }
.movim-scan-overlay { z-index: 10250; background: rgba(0,0,0,.88); }
.movim-hist-overlay { z-index: 10100; }
.movim-imp-panel,
.movim-scan-panel,
.movim-hist-panel {
background: #1a1d27;
border: 1px solid rgba(113,119,144,.28);
border-radius: 18px;
overflow: hidden;
box-shadow: 0 18px 48px rgba(0,0,0,.55);
}
.movim-imp-panel { width: min(560px, 100%); max-height: min(90vh, 820px); display: flex; flex-direction: column; }
.movim-scan-panel { width: min(460px, 92vw); background: #1e293b; border-color: #334155; }
.movim-hist-panel { width: min(1040px, 100%); max-height: 88vh; display: flex; flex-direction: column; }
.movim-imp-header,
.movim-scan-header,
.movim-hist-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 18px;
background: rgba(15,23,42,.72);
border-bottom: 1px solid rgba(113,119,144,.22);
}
.movim-hist-header { align-items: flex-start; padding: 16px 18px; }
.movim-imp-title-wrap,
.movim-scan-title-wrap,
.movim-hist-title-wrap { display: flex; align-items: center; gap: 10px; }
.movim-hist-title-wrap { align-items: flex-start; color: #f1f5f9; }
.movim-imp-title-wrap > i { color: #a78bfa; font-size: 1.1rem; }
.movim-scan-title-wrap { color: #f1f5f9; font-weight: 700; }
.movim-scan-title-wrap i { color: #34d399; }
.movim-hist-title-wrap i { color: #60a5fa; margin-top: 3px; }
.movim-imp-titulo,
.movim-hist-titulo { display: block; font-weight: 700; color: #f1f5f9; }
.movim-hist-titulo { font-size: 1rem; }
.movim-imp-subtitulo,
.movim-hist-subtitulo { display: block; font-size: .78rem; color: #94a3b8; margin-top: 2px; }
.movim-imp-status,
.movim-hist-status { padding: 10px 18px; font-size: .84rem; color: #94a3b8; }
.movim-imp-status.erro,
.movim-hist-status.erro { color: #f87171; }
.movim-imp-status.ok { color: #4ade80; }
.movim-imp-legacy-toggle-wrap { padding: 0 16px 10px; }
.movim-imp-legacy-toggle { width: 100%; background: transparent; color: #94a3b8; border: 1px dashed #475569; border-radius: 9px; padding: 9px 12px; font-weight: 700; cursor: pointer; }
.movim-imp-legacy-toggle:hover, .movim-imp-legacy-toggle[aria-expanded="true"] { color: #e2e8f0; border-color: #64748b; background: rgba(51,65,85,.25); }
.movim-imp-body { padding: 0 16px 14px; overflow-y: auto; display: grid; gap: 12px; }
.movim-imp-section { padding: 14px; border: 1px solid #334155; border-radius: 12px; background: #111827; }
.movim-imp-section h4, .movim-imp-section h5 { margin: 0 0 12px; color: #f8fafc; }
.movim-imp-section h4 { font-size: .92rem; }
.movim-imp-section h5 { font-size: .8rem; color: #cbd5e1; }
.movim-imp-subsection { margin-top: 14px; padding-top: 12px; border-top: 1px solid #263244; }
.movim-imp-grid { display: grid; gap: 10px; }
.movim-imp-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.movim-imp-grid--three { grid-template-columns: 1.25fr .8fr .8fr; }
.movim-imp-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.movim-imp-field--full { margin-bottom: 10px; }
.movim-imp-field span { color: #94a3b8; font-size: .76rem; font-weight: 700; }
.movim-imp-field input, .movim-imp-field select {
width: 100%; box-sizing: border-box; background: #0f172a; color: #f1f5f9;
border: 1px solid #334155; border-radius: 8px; padding: 10px; font-size: .88rem;
}
.movim-imp-btn-block { width: 100%; justify-content: center; margin-top: 12px; }
.movim-imp-btn-contagem { background: #15803d; color: #fff; border: 0; border-radius: 10px; padding: 10px 18px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.movim-imp-section--legacy { border-style: dashed; }
.movim-imp-section--legacy p { margin: -4px 0 12px; color: #94a3b8; font-size: .78rem; }
.movim-imp-btn-legacy { background: #334155; color: #f8fafc; border: 1px solid #64748b; border-radius: 10px; padding: 10px 18px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.movim-imp-etq-wrap,
.movim-imp-qtd-row {
padding: 0 16px 12px;
display: flex;
flex-direction: column;
gap: 6px;
}
.movim-imp-etq-wrap label,
.movim-imp-qtd-row label { color: #94a3b8; font-size: .82rem; font-weight: 600; }
.movim-imp-etq-wrap select,
.movim-imp-qtd-row input {
background: #0f172a;
border: 1px solid #334155;
border-radius: 8px;
padding: 10px 12px;
color: #f1f5f9;
font-size: .92rem;
width: 100%;
box-sizing: border-box;
}
.movim-imp-footer {
display: flex;
justify-content: flex-end;
gap: 10px;
padding: 12px 16px 16px;
border-top: 1px solid rgba(113,119,144,.18);
}
.movim-imp-btn-confirmar {
background: linear-gradient(135deg, #7c3aed, #6366f1);
color: #fff;
border: none;
border-radius: 10px;
padding: 10px 18px;
font-weight: 700;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
font-size: .92rem;
}
.movim-imp-btn-cancelar {
background: #2a2d3a;
color: #d1d5db;
border: 1px solid #3f4454;
border-radius: 10px;
padding: 10px 16px;
cursor: pointer;
font-size: .92rem;
}
@media (max-width: 520px) {
.movim-imp-overlay { padding: 8px; }
.movim-imp-panel { max-height: 96vh; border-radius: 14px; }
.movim-imp-grid--three { grid-template-columns: 1.2fr .8fr .8fr; gap: 7px; }
.movim-imp-field input, .movim-imp-field select { padding: 9px 7px; }
}
.movim-scan-viewport { position: relative; background: #000; width: 100%; aspect-ratio: 4/3; overflow: hidden; }
.movim-scan-viewport video { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
.movim-scan-mira-wrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.movim-scan-mira {
width: min(88%, 320px);
height: 88px;
border: 3px solid rgba(52,211,153,.85);
border-radius: 8px;
box-shadow: 0 0 0 3000px rgba(0,0,0,.38);
transition: border-color .3s, width .25s, height .25s, border-radius .25s;
}
.movim-scan-status { padding: 12px 18px; font-size: .88rem; color: #94a3b8; min-height: 44px; text-align: center; }
.movim-scan-manual { padding: 2px 18px 16px; display: flex; gap: 8px; }
.movim-scan-manual input {
flex: 1;
background: #0f172a;
border: 1px solid #334155;
border-radius: 8px;
padding: 9px 12px;
color: #f1f5f9;
font-size: .9rem;
}
.movim-scan-manual button {
background: #059669;
color: #fff;
border: none;
border-radius: 8px;
padding: 9px 16px;
font-weight: 700;
cursor: pointer;
}
.movim-hist-body { flex: 1; min-height: 120px; overflow: auto; padding: 12px 14px 16px; }
.movim-hist-vazio { color: #6b7280; font-size: .9rem; text-align: center; padding: 28px 12px; }
.movim-hist-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.movim-hist-table th,
.movim-hist-table td {
padding: 8px 10px;
border-bottom: 1px solid rgba(71,85,105,.45);
text-align: left;
vertical-align: top;
}
.movim-hist-table th { color: #9ca3af; font-weight: 600; position: sticky; top: 0; background: #1a1d27; z-index: 1; }
.movim-hist-table td { color: #e2e8f0; }
.movim-hist-tipo-ent { color: #4ade80; font-weight: 700; }
.movim-hist-tipo-sai { color: #f87171; font-weight: 700; }
.movim-hist-tipo-trf { color: #60a5fa; font-weight: 700; }
.movim-hist-saldo { color: #fbbf24; font-weight: 600; white-space: nowrap; }
.movim-hist-obs { color: #94a3b8; max-width: 220px; word-break: break-word; }
.movim-mesmo-arm-aviso {
font-size: .78rem;
color: #9ca3af;
background: transparent;
border: none;
border-radius: 0;
padding: 0 0 4px;
line-height: 1.35;
}
.movim-imprimir-wrap {
display: flex;
align-items: center;
gap: 8px;
font-size: .84rem;
color: #cbd5e1;
cursor: pointer;
user-select: none;
}
.movim-imprimir-wrap input[type="checkbox"] {
width: 18px;
height: 18px;
min-width: 18px;
min-height: 18px;
max-width: 18px;
max-height: 18px;
flex: 0 0 18px;
margin: 0;
}
.movim-imprimir-wrap input { accent-color: #6366f1; }
.movim-endereco-etq-lista {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 8px;
}
.movim-endereco-etq-lista:empty { display: none; }
.movim-endereco-campo {
padding: 10px 12px;
background: #1a1f2e;
border: 1px solid #2f3545;
border-radius: 10px;
}
.movim-endereco-campo-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 8px;
}
.movim-endereco-campo-label {
font-size: .72rem;
font-weight: 700;
color: #fbbf24;
text-transform: uppercase;
letter-spacing: .04em;
}
.movim-endereco-valor {
font-size: .84rem;
font-weight: 700;
color: #fde68a;
word-break: break-word;
line-height: 1.45;
padding: 6px 8px;
background: #141820;
border-radius: 8px;
border: 1px dashed #854d0e55;
}
.movim-endereco-valor.vazio { color: #6b7280; font-weight: 500; border-style: dotted; }
.movim-scan-origem { border-color: #7f1d1d; color: #fecaca; }
.movim-scan-destino { border-color: #166534; color: #bbf7d0; }
.movim-ref-loading { font-size: .82rem; color: #6b7280; }
.movim-ref-erro { font-size: .82rem; color: #f87171; line-height: 1.4; }
.movim-etq-linha {
display: grid;
grid-template-columns: minmax(100px, 1.4fr) repeat(3, minmax(44px, auto)) minmax(60px, 1fr) 36px;
align-items: center;
gap: 8px 12px;
padding: 10px 12px;
background: #1a2332;
border: 1px solid #334155;
border-radius: 10px;
font-size: .78rem;
line-height: 1.35;
cursor: pointer;
transition: border-color .15s, background .15s, box-shadow .15s;
}
.movim-etq-linha:not(.movim-etq-linha--head):hover { border-color: #64748b; background: #1e293b; }
.movim-etq-linha--selected {
border-color: #6366f1 !important;
background: #1e1b4b !important;
box-shadow: 0 0 0 1px rgba(99, 102, 241, .45);
}
.movim-etq-linha--origem { box-shadow: inset 3px 0 0 #f59e0b; }
.movim-etq-linha--destino { box-shadow: inset 3px 0 0 #22c55e; }
.movim-etq-linha--head {
cursor: default;
background: #0f172a;
border-color: #475569;
font-size: .68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
color: #94a3b8;
padding: 8px 12px;
}
.movim-etq-linha--head:hover { background: #0f172a; border-color: #475569; }
.movim-etq-btn-print {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
border: 1px solid #475569;
border-radius: 8px;
background: #0f172a;
color: #a78bfa;
cursor: pointer;
flex-shrink: 0;
transition: background .15s, color .15s, border-color .15s;
}
.movim-etq-btn-print:hover:not(:disabled) { background: #312e81; border-color: #6366f1; color: #e9d5ff; }
.movim-etq-btn-print:disabled { opacity: .55; cursor: wait; }
.movim-etq-end { color: #fde68a; font-weight: 700; word-break: break-word; }
.movim-etq-linha--head .movim-etq-end { color: #94a3b8; }
.movim-etq-meta { color: #cbd5e1; font-weight: 600; white-space: nowrap; }
.movim-etq-meta--comp {
color: #94a3b8;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 140px;
}
.movim-etq-meta--vazio { color: #475569; }
@media (max-width: 640px) {
.movim-etq-linha { grid-template-columns: 1fr; gap: 6px; }
.movim-imp-footer { flex-direction: column; }
.movim-imp-btn-confirmar,
.movim-imp-btn-cancelar,
.movim-scan-manual button {
width: 100%;
justify-content: center;
}
.movim-scan-manual { flex-direction: column; }
}
/* Override final da SEP: modal acompanha o conteúdo em telas estreitas. */
@media (max-width: 768px) {
#modalSeparacaoLogistica,
#modalAguardandoRetiradaSep {
align-items: center !important;
justify-content: center !important;
padding: 10px !important;
}
#modalSeparacaoLogistica > div,
#modalAguardandoRetiradaSep > div {
width: min(100%, 560px) !important;
height: auto !important;
min-height: 0 !important;
max-height: calc(100dvh - 20px) !important;
border: 1px solid #2f3744 !important;
border-radius: 12px !important;
}
#modalSeparacaoLogistica .sep-row--work,
#modalAguardandoRetiradaSep .sep-row--work {
display: grid !important;
grid-template-columns: 36px minmax(0, 1fr) !important;
align-items: start !important;
column-gap: 9px !important;
row-gap: 7px !important;
}
#modalSeparacaoLogistica .sep-row--work .sep-main,
#modalAguardandoRetiradaSep .sep-row--work .sep-main { grid-column: 2 !important; }
#modalSeparacaoLogistica .sep-row--work .sep-qty,
#modalAguardandoRetiradaSep .sep-row--work .sep-qty,
#modalSeparacaoLogistica .sep-row--work > div:last-child,
#modalAguardandoRetiradaSep .sep-row--work > div:last-child { grid-column: 1 / -1 !important; }
}
/* ── AT mobile: lista, Nova OS e modal da OS ── */
@media (max-width: 640px), (max-width: 900px) and (max-height: 500px) {
#sacAtPane .content-wrapper {
/* Espaço à esquerda para o hamburger fixo; sem fixed no Nova OS */
padding: 12px 12px calc(24px + env(safe-area-inset-bottom)) 56px !important;
}
#sacAtPane .title-wrapper {
gap: 8px !important;
margin-bottom: 4px;
}
#sacAtPane .title-wrapper > div:nth-child(2) {
display: none; /* "Abertura de OS" — redundante no celular */
}
#sacAtPane .title-wrapper > div:last-child {
width: 100%;
margin-left: 0 !important;
justify-content: flex-start;
}
#sacAtPane #atConfigAlimentacaoBtn span,
#sacAtPane #atConfigAlimentacaoBtn .fa-chevron-down {
display: none;
}
#sacAtPane #atAtendimentosView {
max-height: none !important;
overflow: visible !important;
}
#sacAtPane #atAtendimentosStatus {
width: 100%;
white-space: normal !important;
font-size: 12px !important;
}
/* No celular força cards; esconde toggle tabela/card */
#sacAtPane #atViewTabela,
#sacAtPane #atViewCard,
#sacAtPane #atTabelaWrapper {
display: none !important;
}
#sacAtPane #atCardsContainer {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 10px !important;
}
#sacAtPane .at-card-item {
min-height: 0;
}
#sacAtPane .at-card-actions {
display: flex;
gap: 8px;
padding: 10px 12px 12px;
border-top: 1px solid var(--border-color, #374151);
}
#sacAtPane .at-card-abrir-os-btn {
flex: 1;
min-height: 44px;
border: none;
border-radius: 10px;
background: linear-gradient(135deg, #0284c7, #0369a1);
color: #fff;
font-size: 14px;
font-weight: 700;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}
#sacAtPane .at-card-editar-btn {
min-width: 48px;
min-height: 44px;
border-radius: 10px;
border: 1px solid var(--border-color, #374151);
background: var(--input-bg, #1e2535);
color: var(--content-title-color, #e5e7eb);
cursor: pointer;
}
/* Nova OS: só o ícone + (sem texto, para não alargar o botão) */
#sacAtPane.at-lista-ativa #atNewOsBtn {
min-height: 44px !important;
min-width: 44px !important;
padding: 10px !important;
border-radius: 10px !important;
}
/* Formulário Nova OS em tela quase cheia */
#atFormModalCard {
width: 100vw !important;
height: 100dvh !important;
max-width: 100vw !important;
max-height: 100dvh !important;
border-radius: 0 !important;
}
#atFormView {
padding-bottom: calc(24px + env(safe-area-inset-bottom)) !important;
}
#atFormView .form-field input,
#atFormView .form-field select,
#atFormView .form-field textarea {
font-size: 16px !important; /* evita zoom iOS */
min-height: 44px;
}
/* Modal OS: ações empilhadas e documento legível */
#atOsModal .modal-container {
width: 100% !important;
max-width: 100% !important;
max-height: 100dvh !important;
border-radius: 0 !important;
margin: 0 !important;
}
#atOsModal .modal-header {
flex-wrap: wrap !important;
gap: 8px !important;
align-items: flex-start !important;
}
#atOsModal .modal-header > div:last-child {
width: 100%;
flex-wrap: wrap;
gap: 6px !important;
}
#atOsModal .modal-header button {
min-height: 40px;
font-size: 12px !important;
padding: 8px 10px !important;
}
#atOsModal .at-os-doc {
margin: 0 8px 12px !important;
}
#atOsModal .at-os-header {
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
align-items: stretch !important;
}
#atOsModal .at-os-fields-grid,
#atOsModal .at-os-fields-row {
display: grid !important;
grid-template-columns: 1fr !important;
}
#atOsModal .at-os-span2 {
grid-column: 1 !important;
}
}
/* ============================================================
MOBILE GLOBAL — usabilidade em todas as páginas (≤640px)
============================================================ */
@media (max-width: 640px), (max-width: 900px) and (max-height: 500px) {
/* —— Base compartilhada —— */
.tab-pane > .content-wrapper,
.tab-pane .content-wrapper {
padding-left: 56px;
padding-right: 12px;
padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
box-sizing: border-box;
}
.title-wrapper,
.tab-header,
.content-wrapper-header {
flex-wrap: wrap !important;
align-items: flex-start !important;
gap: 10px !important;
}
.title-wrapper .actions,
.title-wrapper > div:last-child {
margin-left: 0 !important;
width: 100%;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.content-button,
.tab-action-btn,
.btn-primary,
button.content-button {
min-height: 44px;
}
input[type="text"],
input[type="search"],
input[type="number"],
input[type="date"],
input[type="password"],
input[type="email"],
input[type="tel"],
select,
textarea {
font-size: 16px !important; /* evita zoom iOS */
}
.tabela-wrapper,
.solicitacao-transfer-table-wrapper,
.almox-wrapper,
#pirConteudo,
#riConteudo {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* —— PIR / RI (Produto → Estrutura) —— */
#listaPIR .tab-section-card,
#listaRI .tab-section-card {
padding: 12px !important;
}
#listaPIR .tab-header > div:last-child,
#listaRI .tab-header > div:last-child {
width: 100%;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
#listaPIR #btnAdicionarPIR,
#listaRI .tab-action-btn {
width: 100%;
justify-content: center;
}
#listaPIR #tabelaPIR thead,
#listaRI .ri-table thead,
#listaRI #tabelaRI thead {
display: none;
}
#listaPIR #tabelaPIR,
#listaPIR #tabelaPIR tbody,
#listaPIR #tabelaPIR tr,
#listaPIR #tabelaPIR td,
#listaRI .ri-table,
#listaRI .ri-table tbody,
#listaRI .ri-table tr,
#listaRI .ri-table td,
#listaRI #tabelaRI,
#listaRI #tabelaRI tbody,
#listaRI #tabelaRI tr,
#listaRI #tabelaRI td {
display: block;
width: 100%;
box-sizing: border-box;
}
#listaPIR #tabelaPIR tr,
#listaRI .ri-table tr,
#listaRI #tabelaRI tr {
border: 1px solid var(--border-color, #374151);
border-radius: 10px;
margin-bottom: 10px;
padding: 10px;
background: var(--content-bg, rgba(255,255,255,.03));
}
#listaPIR #tabelaPIR td,
#listaRI .ri-table td,
#listaRI #tabelaRI td {
border: none !important;
padding: 6px 4px !important;
}
#listaPIR #tabelaPIR td:nth-child(1)::before { content: "Código: "; font-weight: 700; color: #94a3b8; }
#listaPIR #tabelaPIR td:nth-child(2)::before { content: "Frequência: "; font-weight: 700; color: #94a3b8; }
#listaPIR #tabelaPIR td:nth-child(3)::before { content: "Verificar: "; font-weight: 700; color: #94a3b8; }
#listaPIR #tabelaPIR td:nth-child(4),
#listaPIR #tabelaPIR td:nth-child(5) {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
#listaPIR #tabelaPIR img {
max-width: 100% !important;
max-height: 160px !important;
height: auto !important;
}
#listaPIR .linha-edicao-pir .btn,
#listaPIR .btn-salvar-edicao-pir,
#listaPIR .btn-cancelar-edicao-pir,
#listaPIR #btnAnexarFotoPIR,
#listaPIR #btnEditAnexarFotoPIR {
min-height: 44px;
width: 100%;
justify-content: center;
margin: 4px 0 !important;
}
/* —— Produção (OP's / kanban) —— */
#registrarProducaoPane .content-wrapper-header {
flex-direction: column !important;
align-items: stretch !important;
}
#registrarProducaoPane .content-wrapper-header button {
min-height: 44px;
flex: 1 1 calc(50% - 8px);
}
#producaoPesquisaInput,
#producaoFiltroCodigoBar input {
min-height: 44px;
}
#producaoKanban {
flex-direction: column !important;
overflow-x: visible !important;
gap: 12px !important;
}
#producaoKanban > div {
flex: 1 1 auto !important;
min-width: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
/* —— Linha de produção / RI: kanbans empilhados; página rola livre —— */
#montaProducaoPane #montaKanban,
#riRegistroInspecaoPane #riRegistroKanban {
flex-direction: column !important;
overflow: visible !important;
gap: 12px !important;
align-items: stretch !important;
padding-bottom: 8px !important;
}
#montaProducaoPane #montaKanban > div,
#riRegistroInspecaoPane #riRegistroKanban > div {
flex: 1 1 auto !important;
min-width: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
/* Sem max-height na coluna — evita travar o arraste da página no celular */
#montaProducaoPane [id^="montaCol_"],
#riRegistroInspecaoPane [id^="riRegistroCol_"] {
max-height: none !important;
min-height: 0 !important;
overflow: visible !important;
}
/* Registrar produção: mantém scroll interno leve (~3 grupos) */
#producaoKanban #kanbanPedidos,
#producaoKanban #kanbanProgramado,
#producaoKanban #kanbanSolicitado,
#producaoKanban #kanbanProduzindo,
#producaoKanban #kanbanAguardando,
#producaoKanban #kanbanInspecaoFinal {
max-height: 420px !important;
min-height: 0 !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
}
#montaProducaoPane .content-wrapper-header {
flex-wrap: wrap !important;
gap: 10px !important;
}
#montaProducaoPane .monta-header-actions {
width: 100%;
justify-content: flex-start !important;
}
#montaProducaoPane .monta-header-actions button {
min-height: 40px;
}
/* —— Armazéns / estoque —— */
#armazemTabs .header-menu {
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
gap: 8px;
}
#armazemTabs .main-header-link {
flex: 0 0 auto;
min-height: 44px;
white-space: nowrap;
}
#conteudo-estoque .estoque-row,
#conteudo-transferencia .estoque-row,
#conteudo-ajuste-estoque .estoque-row {
flex-direction: column !important;
align-items: stretch !important;
gap: 8px !important;
}
#estoqueLocalSelect,
#almoxSearch {
min-width: 0 !important;
width: 100% !important;
}
#conteudo-estoque .estoque-actions {
margin-left: 0 !important;
}
#almoxFilterBtn,
#almoxRefreshBtn {
min-width: 44px;
min-height: 44px;
}
#tbl-almoxarifado {
min-width: 720px;
}
/* —— Solicitações ajuste / transferência —— */
#solicitacaoAjuste .title-wrapper,
#solicitacaoTransferencia .title-wrapper {
flex-wrap: wrap;
}
#solicitacaoAjuste .actions .btn,
#solicitacaoTransferencia .actions .btn,
#solicitacoesAjusteApproveAll,
#solicitacoesTransferApproveAll,
#solicitacoesAjusteRefresh,
#solicitacoesTransferRefresh {
min-height: 44px;
}
.solicitacao-transfer-table {
min-width: 900px;
font-size: 12px;
}
/* —— Recebimento —— */
#recebimentoPane .content-wrapper {
height: auto !important;
overflow: visible !important;
}
#recebimentoPane .title-wrapper {
flex-direction: column;
align-items: stretch !important;
}
#recebimentoRefreshBtn,
#recebimentoClearFiltersBtn,
#recebimentoLocalizarNfeBtn {
min-height: 44px;
width: 100%;
justify-content: center;
}
#recebimentoPane table {
width: max(100%, 900px) !important;
}
/* —— Envio mercadoria (polimento) —— */
#envioMercadoriaPane .content-button {
min-height: 44px;
}
#envioMercadoriaPane .envio-mercadoria-filters input,
#envioMercadoriaPane .envio-status-select,
#envioMercadoriaPane select {
min-height: 44px;
}
/* —— Engenharia —— */
#engenhariaPane .title-wrapper,
#engenhariaCodigosErroPane .title-wrapper,
#engenhariaAlteracoesPane .title-wrapper {
flex-wrap: wrap;
}
#engenhariaPane,
#engenhariaCodigosErroPane,
#engenhariaAlteracoesPane {
overflow-x: auto;
}
#engTable {
min-width: 640px;
font-size: 13px;
}
#codigosErroBusca,
#codigosErroBuscarBtn {
min-height: 44px;
}
/* —— Estrutura / malha —— */
#estruturaProduto .title-wrapper {
flex-wrap: wrap;
gap: 8px;
}
#estruturaLocalProducao {
min-width: 0 !important;
width: 100% !important;
}
#estruturaVersaoWrap {
margin-left: 0 !important;
flex-wrap: wrap;
}
#estruturaProduto ul#malha {
max-height: none;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
#estruturaProduto #malha .button-wrapper button {
min-width: 44px;
min-height: 44px;
}
/* —— Produção 1ª peça / montagem —— */
#producaoPrimeiraPecaOkPane .title-wrapper,
#montaProducaoPane .title-wrapper,
#riRegistroInspecaoPane .title-wrapper {
flex-wrap: wrap;
}
#producaoPrimeiraPecaOkPane input,
#producaoPrimeiraPecaOkPane select,
#montaProducaoPane input,
#montaProducaoPane select {
min-height: 44px;
}
/* —— Qualidade (polimento) —— */
#qualidadeFabricaPane #qualidadeAcoesRapidas .content-button {
min-height: 44px;
}
#qualidadeFabricaPane #qualidadePirPendentesWrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* —— Compras: kanban em coluna no mobile —— */
#comprasFormPane .kanban-board,
#comprasFormPane #minhasComprasKanban {
flex-direction: column !important;
}
/* —— RH (panes injetados via JS) —— */
#dadosColaboradores .title-wrapper,
#rhCadastroColaboradores .rh-colab-title-row,
#rhControleFerias .cf-header {
flex-direction: column !important;
align-items: stretch !important;
gap: 8px !important;
}
#colabFilter,
#cfSearch {
min-width: 0 !important;
width: 100% !important;
}
#dadosColaboradores .colab-grid {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
#rhControleFerias .cf-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
#rhControleFerias table {
min-width: 720px;
}
#rhCadastroColaboradores .rh-colab-actions-top .content-button,
#btnPermissoesPorBotao,
#btnRecarregarColab,
#rhColabReload,
#rhColabAddUser,
#cfFilterBtn,
#cfReload {
min-height: 44px;
}
/* —— Solicitação de envio SAC —— */
#sacSolicitacaoEnvioPane .title-wrapper {
flex-wrap: wrap;
}
#sacSolicitacaoEnvioPane input,
#sacSolicitacaoEnvioPane select,
#sacSolicitacaoEnvioPane textarea {
min-height: 44px;
}
/* —— Pedidos / kanban abas —— */
#kanbanTabs .header-menu {
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
gap: 8px;
}
#kanbanTabs .main-header-link {
flex: 0 0 auto;
min-height: 44px;
white-space: nowrap;
}
}
/* Cadastro de produto V2 */
.cad-prod-overlay[hidden], .cad-prod-card[hidden], .cad-prod-code[hidden], .cad-prod-image-preview[hidden] { display: none !important; }
.cad-prod-overlay { position: fixed; inset: 0; z-index: 11000; background: rgba(3,7,18,.82); backdrop-filter: blur(7px); padding: 18px; display: flex; align-items: center; justify-content: center; }
.cad-prod-dialog { width: min(760px, 100%); max-height: 94vh; display: flex; flex-direction: column; overflow: hidden; background: #151923; border: 1px solid #343b4d; border-radius: 16px; box-shadow: 0 28px 90px rgba(0,0,0,.58); color: #e5e7eb; }
.cad-prod-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid #2b3242; background: #11151e; }
.cad-prod-header h2 { margin: 2px 0 0; font-size: 1.25rem; }
.cad-prod-kicker { font-size: .68rem; font-weight: 800; letter-spacing: .14em; color: #60a5fa; }
.cad-prod-close { width: 40px; height: 40px; border: 1px solid #374151; border-radius: 8px; background: #202634; color: #cbd5e1; font-size: 1.6rem; cursor: pointer; }
.cad-prod-body { overflow-y: auto; padding: 16px; display: grid; gap: 12px; }
.cad-prod-card { border: 1px solid #303849; border-radius: 10px; background: #1a1f2b; padding: 16px; }
.cad-prod-section-title { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 14px; }
.cad-prod-section-title > span { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 7px; display: grid; place-items: center; background: #2563eb; color: white; font-weight: 800; }
.cad-prod-section-title h3 { margin: 0; font-size: .98rem; }
.cad-prod-section-title p { margin: 3px 0 0; color: #94a3b8; font-size: .78rem; }
.cad-prod-field { display: grid; gap: 6px; margin-bottom: 12px; }
.cad-prod-field > span { font-size: .78rem; font-weight: 700; color: #cbd5e1; }
.cad-prod-field small { color: #94a3b8; font-weight: 500; }
/* Modal sempre escuro: forçar texto claro (modo claro do site sobrescrevia color). */
.cad-prod-dialog,
#cadProdutoV2 .cad-prod-dialog {
color-scheme: dark;
}
.cad-prod-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.cad-prod-field select,
.cad-prod-field textarea,
.light-mode .cad-prod-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.light-mode .cad-prod-field select,
.light-mode .cad-prod-field textarea,
.light-mode #cadProdutoV2 input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.light-mode #cadProdutoV2 select,
.light-mode #cadProdutoV2 textarea {
width: 100%;
box-sizing: border-box;
border: 1px solid #475569;
border-radius: 8px;
background: #252c3b !important;
color: #f8fafc !important;
-webkit-text-fill-color: #f8fafc !important;
caret-color: #f8fafc;
padding: 10px 11px;
font: inherit;
}
.cad-prod-field input::placeholder,
.cad-prod-field textarea::placeholder,
.light-mode .cad-prod-field input::placeholder,
.light-mode .cad-prod-field textarea::placeholder,
.light-mode #cadProdutoV2 input::placeholder,
.light-mode #cadProdutoV2 textarea::placeholder {
color: #94a3b8 !important;
-webkit-text-fill-color: #94a3b8 !important;
opacity: 1;
}
.cad-prod-field input:-webkit-autofill,
.cad-prod-field input:-webkit-autofill:hover,
.cad-prod-field input:-webkit-autofill:focus,
.light-mode .cad-prod-field input:-webkit-autofill {
-webkit-text-fill-color: #f8fafc !important;
caret-color: #f8fafc;
transition: background-color 99999s ease-in-out 0s;
box-shadow: 0 0 0 1000px #252c3b inset !important;
}
.cad-prod-field select option,
.light-mode .cad-prod-field select option {
background: #1a1f2b;
color: #f8fafc;
}
.cad-prod-field textarea { resize: vertical; min-height: 120px; }
.cad-prod-reveal { justify-self: start; border: 0; background: transparent; color: #60a5fa; padding: 2px 0; font-size: .75rem; font-weight: 700; cursor: pointer; }
.cad-prod-origin, .cad-prod-mode, .cad-prod-actions, .cad-prod-image-picker { display: flex; gap: 8px; }
.cad-prod-origin button, .cad-prod-mode button, .cad-prod-image-picker button { flex: 1; border: 1px solid #475569; border-radius: 8px; padding: 10px; background: #252c3b; color: #cbd5e1; cursor: pointer; font-weight: 700; }
.cad-prod-origin button.active, .cad-prod-mode button.active { border-color: #3b82f6; color: white; background: #1d4ed8; }
.cad-prod-mode { margin-top: 6px; padding-top: 14px; border-top: 1px solid #303849; }
.cad-prod-grid-two { display: grid; grid-template-columns: 1fr 1.5fr; gap: 10px; }
.cad-prod-btn { border: 0; border-radius: 8px; min-height: 42px; padding: 10px 16px; color: white; font-weight: 800; cursor: pointer; }
.cad-prod-btn:disabled { opacity: .45; cursor: not-allowed; }
.cad-prod-btn-primary { width: 100%; background: #2563eb; }
.cad-prod-btn-success { width: 100%; background: #15803d; }
.cad-prod-actions .cad-prod-btn { flex: 1; }
.cad-prod-code { margin: 12px 0; padding: 13px 14px; border: 1px solid #2563eb; border-left-width: 4px; border-radius: 8px; background: #111827; display: flex; justify-content: space-between; align-items: center; }
.cad-prod-code small, .cad-prod-code span { display: block; color: #94a3b8; font-size: .72rem; }
.cad-prod-code strong { display: block; margin: 3px 0; color: #93c5fd; font: 800 1.25rem ui-monospace, monospace; }
.cad-prod-code button { background: #293244; color: #e2e8f0; border: 1px solid #475569; border-radius: 7px; padding: 9px 11px; cursor: pointer; }
.cad-prod-image-picker input { flex: 2; padding: 7px; }
.cad-prod-image-drop { border: 1px dashed #64748b; border-radius: 9px; padding: 14px; display: grid; justify-items: center; gap: 5px; color: #94a3b8; background: #111827; transition: border-color .15s, background .15s; }
.cad-prod-image-drop > i { color: #60a5fa; font-size: 1.35rem; }
.cad-prod-image-drop > strong { color: #cbd5e1; font-size: .82rem; }
.cad-prod-image-drop > small { margin-bottom: 8px; }
.cad-prod-image-drop.is-dragging { border-color: #60a5fa; background: #172554; }
.cad-prod-image-drop .cad-prod-image-picker { width: 100%; }
.cad-prod-image-preview { display: flex; gap: 12px; align-items: center; margin: 8px 0 12px; padding: 10px; background: #111827; border-radius: 8px; }
.cad-prod-image-preview img { width: 72px; height: 72px; object-fit: contain; background: white; border-radius: 6px; }
.cad-prod-image-preview span { color: #94a3b8; font-size: .78rem; }
.cad-prod-table-wrap { margin-top: 12px; overflow: auto; border: 1px solid #303849; border-radius: 8px; }
.cad-prod-table-wrap table { width: 100%; border-collapse: collapse; min-width: 570px; font-size: .78rem; }
.cad-prod-table-wrap th, .cad-prod-table-wrap td { padding: 9px 10px; border-bottom: 1px solid #303849; text-align: left; }
.cad-prod-table-wrap th { color: #94a3b8; background: #111827; }
.cad-prod-status { min-height: 20px; padding: 2px 4px; color: #94a3b8; font-size: .82rem; }
.cad-prod-status.ok { color: #4ade80; }
.cad-prod-status.error { color: #f87171; }
@media (max-width: 620px) {
.cad-prod-overlay { padding: 0; align-items: stretch; }
.cad-prod-dialog { max-height: 100vh; border-radius: 0; }
.cad-prod-header { padding: 14px 16px; }
.cad-prod-body { padding: 10px; }
.cad-prod-card { padding: 13px; }
.cad-prod-grid-two { grid-template-columns: 1fr; }
.cad-prod-image-picker { flex-wrap: wrap; }
.cad-prod-image-picker input { flex-basis: 100%; }
}
/* Carrinho v2: folha clara, hierarquia por espaco e rolagem interna correta. */
#modalCarrinhoCompras .carrinho-shell {
display: flex !important;
flex-direction: column;
height: min(880px, 94dvh) !important;
max-height: 94dvh !important;
border: 1px solid rgba(148, 163, 184, .38) !important;
background: #f6f8fb !important;
box-shadow: 0 30px 90px rgba(2, 6, 23, .36) !important;
}
#modalCarrinhoCompras .carrinho-header {
flex: 0 0 auto;
border-bottom-color: #e5eaf1 !important;
background: rgba(255, 255, 255, .96) !important;
color: #172033;
}
#modalCarrinhoCompras .carrinho-header h3 { color: #172033 !important; }
#modalCarrinhoCompras .carrinho-header h3 i { color: #f59e0b !important; }
#modalCarrinhoCompras .carrinho-header .modal-close-btn { color: #64748b !important; }
#modalCarrinhoCompras .carrinho-body {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto !important;
background: #f6f8fb !important;
scrollbar-color: #cbd5e1 transparent;
}
#modalCarrinhoCompras .carrinho-form-card {
border: 1px solid #e2e8f0 !important;
background: rgba(255, 255, 255, .82) !important;
box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
}
#modalCarrinhoCompras .carrinho-form-card::before,
#modalCarrinhoCompras .carrinho-form-card > label:not([id]) {
color: #536176 !important;
}
#modalCarrinhoCompras select,
#modalCarrinhoCompras input[type="text"],
#modalCarrinhoCompras input[type="date"],
#modalCarrinhoCompras input[type="number"],
#modalCarrinhoCompras textarea,
#modalCarrinhoCompras .carrinho-item-categoria-btn {
border-color: #d9e1eb !important;
background: #fff !important;
color: #182235 !important;
box-shadow: 0 1px 2px rgba(15, 23, 42, .025);
}
#modalCarrinhoCompras select {
color: #182235 !important;
-webkit-text-fill-color: #182235 !important;
color-scheme: light !important;
}
#modalCarrinhoCompras select option,
#modalCarrinhoCompras select optgroup {
background: #fff !important;
color: #182235 !important;
-webkit-text-fill-color: #182235 !important;
}
#modalCarrinhoCompras select option:checked {
background: #e8f1ff !important;
color: #174f9c !important;
}
#modalCarrinhoCompras #carrinhoRetornoCotacaoGlobal {
background-color: #fff !important;
color: #182235 !important;
-webkit-text-fill-color: #182235 !important;
}
#modalCarrinhoCompras input::placeholder,
#modalCarrinhoCompras textarea::placeholder { color: #9aa8ba; }
#modalCarrinhoCompras .carrinho-form-options > label[id],
#modalCarrinhoCompras .carrinho-form-options > label:not([for]) {
border-color: #e2e8f0 !important;
background: #fff !important;
}
#modalCarrinhoCompras .carrinho-form-options label span { color: #253047 !important; }
#modalCarrinhoCompras .carrinho-category-link-hint {
border-color: #b9e5d6;
background: #edf9f5;
color: #18745e;
}
#modalCarrinhoCompras .carrinho-category-link-hint.is-manual {
border-color: #f0ddb0;
background: #fff9e9;
color: #8a6418;
}
#modalCarrinhoCompras .carrinho-anexo-dropzone {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 11px;
min-height: 58px;
padding: 9px 10px;
border: 1px dashed #b8c5d5;
border-radius: 9px;
background: #f9fbfd;
color: #64748b;
cursor: pointer;
transition: border-color .16s, background .16s, transform .16s;
}
#modalCarrinhoCompras .carrinho-anexo-dropzone:hover,
#modalCarrinhoCompras .carrinho-anexo-dropzone:focus-visible,
#modalCarrinhoCompras .carrinho-anexo-dropzone.is-dragging {
border-color: #4d9cff;
background: #eef6ff;
outline: none;
}
#modalCarrinhoCompras .carrinho-anexo-dropzone.is-dragging { transform: scale(.995); }
#modalCarrinhoCompras .carrinho-anexo-dropzone > i { color: #4388dc; font-size: 20px; }
#modalCarrinhoCompras .carrinho-anexo-dropzone span { display: grid; gap: 2px; color: #344258; font-size: 11px; }
#modalCarrinhoCompras .carrinho-anexo-dropzone small { color: #8795a8; font-weight: 500; }
#modalCarrinhoCompras .carrinho-anexo-dropzone button {
min-height: 34px;
padding: 0 11px;
border: 1px solid #d5deea;
border-radius: 7px;
background: #fff;
color: #315f98;
font-size: 11px;
font-weight: 750;
cursor: pointer;
}
#modalCarrinhoCompras #carrinhoAnexosGlobalInfo {
padding: 7px 9px;
border-radius: 7px;
background: #edf9f5;
color: #18745e !important;
}
#modalCarrinhoCompras #btnColarListaCompra {
border-color: #b9e5d6 !important;
background: #edf9f5 !important;
color: #18745e !important;
}
#modalCarrinhoCompras .carrinho-count-bar {
position: sticky;
z-index: 3;
top: -18px;
border-color: #e1e7ef;
background: rgba(246, 248, 251, .94);
color: #64748b !important;
backdrop-filter: blur(8px);
}
#modalCarrinhoCompras .carrinho-count-bar strong { color: #2563eb !important; }
#modalCarrinhoCompras .carrinho-np-group {
border-color: #e0e7f0 !important;
background: #eef2f7 !important;
}
#modalCarrinhoCompras .carrinho-np-group > div:first-child > div { color: #536176 !important; }
#modalCarrinhoCompras .carrinho-product-card {
border-color: #dde5ef !important;
background: #fff !important;
box-shadow: 0 3px 14px rgba(15, 23, 42, .055) !important;
}
#modalCarrinhoCompras .carrinho-product-card [style*="color:#111827"] { color: #172033 !important; }
#modalCarrinhoCompras .carrinho-product-card [style*="color:#6b7280"] { color: #718096 !important; }
#modalCarrinhoCompras .carrinho-detalhes-expandiveis { border-top-color: #e7ecf2 !important; }
#modalCarrinhoCompras .carrinho-footer {
border-top-color: #e1e7ef;
background: rgba(255, 255, 255, .96);
box-shadow: 0 -8px 22px rgba(15, 23, 42, .045);
}
#modalCarrinhoCompras #modalComprasLimparCarrinhoBtn {
border: 1px solid #e1e7ef;
background: #fff !important;
color: #66758a !important;
}
#modalCarrinhoCompras #modalComprasEnviarPedidoBtn {
border: 0;
background: #2563eb !important;
box-shadow: 0 7px 18px rgba(37, 99, 235, .22);
}
@media (max-width: 720px) {
#modalCarrinhoCompras .carrinho-shell {
height: 96dvh !important;
max-height: 96dvh !important;
}
#modalCarrinhoCompras .carrinho-anexo-dropzone {
grid-template-columns: auto 1fr;
}
#modalCarrinhoCompras .carrinho-anexo-dropzone button {
grid-column: 1 / -1;
width: 100%;
}
}
/* ===== Auditar (monitoramento) — desktop + mobile ===== */
.auditar-page {
padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}
.auditar-section {
max-width: 1100px;
}
.auditar-header {
display: grid;
gap: 10px;
margin-bottom: 16px;
}
.auditar-title {
display: flex;
align-items: center;
gap: 10px;
margin: 0;
color: #0f766e;
font-size: 1.15rem;
}
.auditar-title i { color: #0f766e; }
.auditar-subtitle {
margin: 0;
color: #64748b;
font-size: 13px;
line-height: 1.45;
}
.auditar-buscar-btn {
justify-self: start;
background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%) !important;
color: #fff !important;
min-height: 44px;
padding: 10px 18px !important;
font-weight: 700;
}
.auditar-filtros {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 10px;
margin-bottom: 14px;
}
.auditar-field {
display: flex;
flex-direction: column;
gap: 6px;
font-size: 12px;
font-weight: 600;
color: #334155;
}
.auditar-field input {
width: 100%;
box-sizing: border-box;
padding: 11px 12px;
border: 1px solid #cbd5e1;
border-radius: 10px;
font-size: 16px; /* evita zoom no iOS */
background: #fff;
color: #0f172a;
min-height: 44px;
}
.auditar-field-produto {
grid-column: 1 / -1;
}
.auditar-produto-wrap {
position: relative;
}
.auditar-sugestoes {
position: absolute;
z-index: 40;
left: 0;
right: 0;
top: calc(100% + 4px);
max-height: 280px;
overflow-y: auto;
background: #fff;
border: 1px solid #cbd5e1;
border-radius: 12px;
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
}
.auditar-sugestao-item {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
width: 100%;
padding: 10px 12px;
border: 0;
border-bottom: 1px solid #f1f5f9;
background: #fff;
text-align: left;
cursor: pointer;
}
.auditar-sugestao-item:last-child { border-bottom: 0; }
.auditar-sugestao-item:hover,
.auditar-sugestao-item:focus {
background: #f0fdfa;
outline: none;
}
.auditar-sugestao-item .cod {
font-weight: 700;
color: #0f766e;
font-size: 13px;
}
.auditar-sugestao-item .desc {
font-size: 12px;
color: #64748b;
line-height: 1.35;
word-break: break-word;
}
.auditar-sugestao-vazia {
padding: 12px;
font-size: 13px;
color: #64748b;
}
.auditar-status {
margin-bottom: 12px;
font-size: 13px;
color: #64748b;
line-height: 1.4;
}
.auditar-block { margin-bottom: 18px; }
.auditar-block-title {
margin: 0 0 10px;
font-size: 14px;
color: #0f766e;
}
.auditar-sessoes {
display: flex;
flex-direction: column;
gap: 8px;
}
.auditar-sessao-card {
padding: 12px 14px;
border: 1px solid #99f6e4;
background: #f0fdfa;
border-radius: 12px;
}
.auditar-sessao-card .tit {
font-weight: 700;
color: #134e4a;
font-size: 14px;
word-break: break-word;
}
.auditar-sessao-card .meta {
font-size: 12px;
color: #0f766e;
margin-top: 4px;
line-height: 1.4;
}
.auditar-sessao-card .desc {
font-size: 12px;
color: #64748b;
margin-top: 2px;
word-break: break-word;
}
.auditar-cards {
display: none;
flex-direction: column;
gap: 10px;
}
.auditar-card {
border: 1px solid #e2e8f0;
border-radius: 12px;
background: #fff;
padding: 12px 14px;
display: grid;
gap: 8px;
}
.auditar-card-top {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.auditar-card-quando {
font-size: 12px;
color: #64748b;
font-weight: 600;
}
.auditar-badge {
font-size: 11px;
font-weight: 800;
padding: 3px 9px;
border-radius: 999px;
display: inline-flex;
}
.auditar-badge.ui { background: #e0e7ff; color: #3730a3; }
.auditar-badge.api { background: #dcfce7; color: #166534; }
.auditar-card-acao {
font-size: 15px;
font-weight: 800;
color: #0f172a;
word-break: break-word;
}
.auditar-card-row {
font-size: 13px;
color: #334155;
line-height: 1.35;
word-break: break-word;
}
.auditar-card-row strong {
color: #64748b;
font-weight: 700;
margin-right: 4px;
}
.auditar-card-detalhe {
font-size: 12px;
color: #475569;
background: #f8fafc;
border-radius: 8px;
padding: 8px 10px;
line-height: 1.4;
word-break: break-word;
}
.auditar-table-wrap {
overflow: auto;
border: 1px solid #e2e8f0;
border-radius: 10px;
-webkit-overflow-scrolling: touch;
}
.auditar-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
min-width: 720px;
}
.auditar-table th {
padding: 10px 12px;
background: #f1f5f9;
text-align: left;
position: sticky;
top: 0;
}
.auditar-table td {
padding: 10px 12px;
border-top: 1px solid #e2e8f0;
vertical-align: top;
}
.auditar-table td.detalhe {
color: #475569;
max-width: 420px;
word-break: break-word;
}
@media (max-width: 820px) {
#auditarPane .auditar-page {
padding-left: 12px;
padding-right: 12px;
}
.auditar-header {
gap: 12px;
}
.auditar-buscar-btn {
width: 100%;
justify-content: center;
}
.auditar-filtros {
grid-template-columns: 1fr 1fr;
}
.auditar-field:nth-child(1),
.auditar-field:nth-child(2),
.auditar-field:nth-child(3) {
grid-column: 1 / -1;
}
.auditar-cards { display: flex; }
.auditar-table-wrap { display: none; }
}
@media (max-width: 480px) {
.auditar-filtros {
grid-template-columns: 1fr;
}
.auditar-field:nth-child(1),
.auditar-field:nth-child(2),
.auditar-field:nth-child(3),
.auditar-field:nth-child(4),
.auditar-field:nth-child(5) {
grid-column: auto;
}
.auditar-title {
font-size: 1.05rem;
}
}
/*
* Tema legado de compras preservado apenas como referência histórica.
* Ele entrou pela branch de logística e, por estar no fim do arquivo com
* vários !important, sobrescrevia o redesign Omie entregue pela PR #74.
*/
@media not all {
/* Compras workspace: operational, calm and intentionally dense. */
#minhasComprasWrapper {
--cp-bg: #101318;
--cp-panel: #171b22;
--cp-column: #1d222a;
--cp-card: #242a33;
--cp-card-hover: #29313b;
--cp-border: #343c47;
--cp-border-soft: #2a313a;
--cp-text: #f4f6f8;
--cp-muted: #9da7b4;
--cp-subtle: #737f8e;
--cp-accent: #55b7a5;
--cp-accent-soft: rgba(85, 183, 165, .14);
--cp-warning: #e6ad58;
--cp-danger: #e27474;
--cp-shadow: 0 10px 28px rgba(0, 0, 0, .18);
background: var(--cp-bg) !important;
color: var(--cp-text);
border-radius: 10px;
padding: 20px !important;
box-sizing: border-box;
flex-direction: column;
width: 100%;
}
html.light-mode #minhasComprasWrapper {
--cp-bg: #f3f5f7;
--cp-panel: #ffffff;
--cp-column: #e9edf1;
--cp-card: #ffffff;
--cp-card-hover: #fbfcfd;
--cp-border: #d8dee5;
--cp-border-soft: #e5e9ee;
--cp-text: #18212b;
--cp-muted: #637080;
--cp-subtle: #8792a0;
--cp-accent: #187c6d;
--cp-accent-soft: #dcefe9;
--cp-warning: #a96714;
--cp-danger: #bd4141;
--cp-shadow: 0 8px 24px rgba(32, 45, 58, .08);
}
#comprasListaToolbar.compras-workspace-toolbar {
position: relative;
display: flex !important;
align-items: flex-end !important;
gap: 20px !important;
margin: 0 0 18px !important;
padding: 0 0 18px !important;
border-bottom: 1px solid var(--cp-border-soft);
}
.compras-toolbar-main {
align-items: flex-end !important;
flex-wrap: wrap;
min-width: 280px;
}
.compras-workspace-title {
min-width: 270px;
color: var(--cp-text) !important;
}
.compras-workspace-title > span:last-child {
display: flex;
flex-direction: column;
gap: 3px;
}
.compras-workspace-title strong {
font-size: 19px;
line-height: 1.2;
letter-spacing: -.02em;
}
.compras-workspace-title small {
color: var(--cp-muted);
font-size: 12px;
font-weight: 500;
}
.compras-title-icon {
display: grid;
width: 38px;
height: 38px;
place-items: center;
color: var(--cp-accent);
background: var(--cp-accent-soft);
border-radius: 8px;
}
.compras-global-search {
position: relative;
width: min(360px, 100%);
max-width: none !important;
gap: 0 !important;
}
.compras-global-search > i {
position: absolute;
left: 13px;
z-index: 1;
color: var(--cp-muted) !important;
}
#kanbanFiltroGlobal {
width: 100%;
height: 40px;
padding: 0 38px !important;
color: var(--cp-text) !important;
background: var(--cp-panel) !important;
border: 1px solid var(--cp-border) !important;
border-radius: 8px !important;
font-size: 13px !important;
outline: none;
}
#kanbanFiltroGlobal:focus {
border-color: var(--cp-accent) !important;
box-shadow: 0 0 0 3px var(--cp-accent-soft);
}
.compras-toolbar-actions {
gap: 7px !important;
flex-wrap: wrap;
justify-content: flex-end;
}
.compras-toolbar-actions > .content-button {
width: 40px !important;
height: 40px !important;
min-width: 40px;
padding: 0 !important;
color: var(--cp-muted) !important;
background: var(--cp-panel) !important;
border: 1px solid var(--cp-border) !important;
border-radius: 8px !important;
box-shadow: none !important;
}
.compras-toolbar-actions > .content-button:hover {
color: var(--cp-text) !important;
border-color: var(--cp-accent) !important;
transform: translateY(-1px);
}
#comprasToggleSolicitanteBtn {
width: auto !important;
padding: 0 13px !important;
color: var(--cp-text) !important;
}
#kanbanMinhasSolicitacoes.kanban-container {
align-items: stretch;
gap: 12px !important;
margin: 0 !important;
padding: 2px 2px 14px !important;
scroll-snap-type: x proximity;
scrollbar-color: var(--cp-border) transparent;
}
#kanbanMinhasSolicitacoes .kanban-column-minhas {
--cp-stage: var(--cp-accent);
position: relative;
flex: 0 0 304px !important;
min-width: 304px !important;
height: 100%;
padding: 12px !important;
background: var(--cp-column) !important;
border: 1px solid var(--cp-border) !important;
border-radius: 8px !important;
box-shadow: none !important;
scroll-snap-align: start;
overflow: hidden;
display: flex;
flex-direction: column;
box-sizing: border-box;
}
#kanbanMinhasSolicitacoes .kanban-column-minhas::before {
content: "";
position: absolute;
inset: 0 0 auto;
height: 3px;
background: var(--cp-stage);
}
#kanbanMinhasSolicitacoes .kanban-column-minhas[data-status="aguardando aprovação da requisição"] { --cp-stage: #d6a24f; }
#kanbanMinhasSolicitacoes .kanban-column-minhas[data-status="analise de cadastro"] { --cp-stage: #8d85d8; }
#kanbanMinhasSolicitacoes .kanban-column-minhas[data-status="aguardando compra preparação"] { --cp-stage: #5b8fc8; }
#kanbanMinhasSolicitacoes .kanban-column-minhas[data-status="compra realizada"] { --cp-stage: #55b7a5; }
#kanbanMinhasSolicitacoes .kanban-column-minhas[data-status="faturada pelo fornecedor"] { --cp-stage: #d69b4a; }
#kanbanMinhasSolicitacoes .kanban-column-minhas[data-status="recebido"] { --cp-stage: #69a7b4; }
#kanbanMinhasSolicitacoes .kanban-column-minhas[data-status="concluído"] { --cp-stage: #7d8996; }
#kanbanMinhasSolicitacoes .kanban-column-minhas > div:first-child {
min-height: 34px;
margin: 0 !important;
padding: 0 2px 10px !important;
border: 0 !important;
}
#kanbanMinhasSolicitacoes .kanban-column-minhas h3 {
color: var(--cp-text) !important;
font-family: "Montserrat", sans-serif;
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: .015em;
}
#kanbanMinhasSolicitacoes .kanban-column-minhas h3 i {
color: var(--cp-muted) !important;
}
#kanbanMinhasSolicitacoes .kanban-count-minhas {
min-width: 24px;
padding: 3px 7px !important;
color: var(--cp-muted) !important;
background: var(--cp-panel) !important;
border: 1px solid var(--cp-border-soft);
border-radius: 999px !important;
text-align: center;
font-variant-numeric: tabular-nums;
}
#kanbanMinhasSolicitacoes .kanban-column-minhas > div:nth-last-child(2) {
border-top: 1px solid var(--cp-border-soft) !important;
}
#kanbanMinhasSolicitacoes .kanban-cards-minhas {
max-height: none !important;
flex: 1 1 auto;
min-height: 0;
overflow-y: auto !important;
gap: 9px !important;
padding: 1px 3px 10px 1px !important;
scrollbar-width: thin;
scrollbar-color: var(--cp-border) transparent;
}
#kanbanMinhasSolicitacoes .kanban-cards-minhas::-webkit-scrollbar { width: 7px; }
#kanbanMinhasSolicitacoes .kanban-cards-minhas::-webkit-scrollbar-track { background: transparent; }
#kanbanMinhasSolicitacoes .kanban-cards-minhas::-webkit-scrollbar-thumb {
background: var(--cp-border);
border-radius: 999px;
}
#kanbanMinhasSolicitacoes .kanban-card {
padding: 12px !important;
color: var(--cp-text) !important;
background: var(--cp-card) !important;
border: 1px solid var(--cp-border-soft) !important;
border-left: 3px solid var(--cp-accent) !important;
border-radius: 7px !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, .08) !important;
cursor: pointer;
}
#kanbanMinhasSolicitacoes .kanban-card:hover {
background: var(--cp-card-hover) !important;
border-color: var(--cp-border) !important;
border-left-color: var(--cp-accent) !important;
box-shadow: var(--cp-shadow) !important;
}
#kanbanMinhasSolicitacoes .kanban-card > div {
color: var(--cp-muted) !important;
line-height: 1.35;
}
#kanbanMinhasSolicitacoes .cp-card-number {
margin-bottom: 5px !important;
color: var(--cp-subtle) !important;
font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
font-size: 11px !important;
font-weight: 650 !important;
letter-spacing: .02em;
}
#kanbanMinhasSolicitacoes .cp-card-supplier {
margin-bottom: 10px !important;
color: var(--cp-text) !important;
font-family: "Montserrat", sans-serif;
font-size: 12px !important;
font-weight: 700 !important;
line-height: 1.35 !important;
text-transform: none;
}
#kanbanMinhasSolicitacoes .cp-card-supplier i {
color: var(--cp-subtle) !important;
}
#kanbanMinhasSolicitacoes .cp-card-dates {
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: 5px 10px !important;
margin-bottom: 9px !important;
padding: 7px 0 0 !important;
color: var(--cp-muted) !important;
background: transparent !important;
border-top: 1px solid var(--cp-border-soft);
font-size: 10px !important;
font-variant-numeric: tabular-nums;
}
#kanbanMinhasSolicitacoes .cp-card-requester {
margin-bottom: 8px !important;
padding: 0 !important;
color: var(--cp-muted) !important;
background: transparent !important;
font-size: 10px !important;
}
#kanbanMinhasSolicitacoes .cp-card-summary {
margin: 0 !important;
padding: 8px 0 0 !important;
color: var(--cp-text) !important;
background: transparent !important;
border-top: 1px solid var(--cp-border-soft);
font-size: 12px !important;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
#kanbanMinhasSolicitacoes .kanban-card > div[style*="background"]:not(.cp-card-supplier):not(.cp-card-dates):not(.cp-card-requester):not(.cp-card-summary) {
margin-bottom: 7px !important;
padding: 0 !important;
color: var(--cp-muted) !important;
background: transparent !important;
border-radius: 0 !important;
}
#kanbanMinhasSolicitacoes .kanban-card span[style*="color:#374151"],
#kanbanMinhasSolicitacoes .kanban-card div[style*="color:#374151"] {
color: var(--cp-text) !important;
}
#kanbanMinhasSolicitacoes .kanban-card div[style*="background:#fef3c7"]:not(.cp-card-dates) {
padding: 7px 8px !important;
color: var(--cp-warning) !important;
background: color-mix(in srgb, var(--cp-warning) 10%, transparent) !important;
border-radius: 5px !important;
}
#kanbanMinhasSolicitacoes .kanban-card button[aria-label="Expandir"] {
width: 28px;
height: 28px;
padding: 0 !important;
color: var(--cp-muted) !important;
background: transparent !important;
border: 1px solid var(--cp-border) !important;
}
#kanbanMinhasSolicitacoes .kanban-card button[aria-label="Expandir"]:hover {
color: var(--cp-text) !important;
background: var(--cp-panel) !important;
}
#kanbanMinhasSolicitacoes .kanban-column-minhas[data-status="faturada pelo fornecedor"] .kanban-card {
border-left-color: var(--cp-warning) !important;
}
#kanbanMinhasSolicitacoes .kanban-column-minhas[data-status="recebido"] .kanban-card,
#kanbanMinhasSolicitacoes .kanban-column-minhas[data-status="concluído"] .kanban-card {
border-left-color: var(--cp-subtle) !important;
}
@media (max-width: 900px) {
#minhasComprasWrapper { padding: 14px !important; }
#comprasListaToolbar.compras-workspace-toolbar { align-items: stretch !important; }
.compras-toolbar-actions { justify-content: flex-start; }
#kanbanMinhasSolicitacoes .kanban-column-minhas {
flex-basis: min(86vw, 320px) !important;
min-width: min(86vw, 320px) !important;
}
}
@media (max-width: 560px) {
#minhasComprasWrapper { padding: 12px 10px !important; }
#comprasListaToolbar.compras-workspace-toolbar { flex-direction: column; }
.compras-workspace-title { min-width: 0; }
.compras-global-search { width: 100%; }
.compras-toolbar-actions { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
}
@media (prefers-reduced-motion: reduce) {
#minhasComprasWrapper *, #minhasComprasWrapper *::before, #minhasComprasWrapper *::after {
scroll-behavior: auto !important;
transition-duration: .01ms !important;
}
}
}
/* Ficha operacional de compras: familiaridade com a Omie e prioridade para os itens. */
/* Kanban de compras: densidade operacional próxima da Omie. */
#minhasComprasWrapper {
--cp-bg: #f3f5f7;
--cp-panel: #ffffff;
--cp-column: #e9edf1;
--cp-card: #ffffff;
--cp-card-hover: #fbfcfd;
--cp-border: #d8dee5;
--cp-border-soft: #e5e9ee;
--cp-text: #18212b;
--cp-muted: #637080;
--cp-subtle: #8792a0;
--cp-accent: #187c6d;
--cp-accent-soft: #dcefe9;
--cp-warning: #a96714;
--cp-danger: #bd4141;
--cp-shadow: 0 8px 24px rgba(32, 45, 58, .08);
background: var(--cp-bg) !important;
color: var(--cp-text) !important;
color-scheme: light;
}
/*
* Compras mantém a superfície operacional clara mesmo quando o shell está
* escuro. Estas regras neutralizam os antigos catch-alls globais do tema que
* recolorem fundos brancos inline com !important.
*/
:root:not(.light-mode) #minhasComprasWrapper {
background: #f3f4f6 !important;
color: #18212b !important;
}
:root:not(.light-mode) #minhasComprasWrapper .compras-board-overview {
background: #ffffff !important;
color: #18212b !important;
border-color: #e5e7eb !important;
}
:root:not(.light-mode) #minhasComprasWrapper .compras-board-tab,
:root:not(.light-mode) #minhasComprasWrapper .compras-board-metrics > span {
background: #f8fafc !important;
color: #526173 !important;
border-color: #e2e8f0 !important;
}
:root:not(.light-mode) #minhasComprasWrapper .compras-board-tab.is-active,
:root:not(.light-mode) #minhasComprasWrapper .compras-board-metrics strong {
color: #18212b !important;
}
:root:not(.light-mode) #minhasComprasWrapper #kanbanMinhasSolicitacoes {
background: #f3f4f6 !important;
}
:root:not(.light-mode) #minhasComprasWrapper #kanbanMinhasSolicitacoes .kanban-column-minhas {
background: #e9edf1 !important;
color: #18212b !important;
border-color: #d8dee5 !important;
}
:root:not(.light-mode) #minhasComprasWrapper #kanbanMinhasSolicitacoes .kanban-column-minhas > div:first-child {
background: #fff8f6 !important;
border-color: #e5e9ee !important;
}
:root:not(.light-mode) #minhasComprasWrapper #kanbanMinhasSolicitacoes .kanban-column-minhas h3,
:root:not(.light-mode) #minhasComprasWrapper #kanbanMinhasSolicitacoes .kanban-column-minhas h3 i {
color: #334155 !important;
}
:root:not(.light-mode) #minhasComprasWrapper #kanbanMinhasSolicitacoes .kanban-card,
:root:not(.light-mode) #minhasComprasWrapper #kanbanMinhasSolicitacoes .kanban-card[style*="background"] {
background: #ffffff !important;
color: #18212b !important;
border-color: #e5e9ee !important;
}
:root:not(.light-mode) #minhasComprasWrapper #kanbanMinhasSolicitacoes .kanban-card .cp-card-number,
:root:not(.light-mode) #minhasComprasWrapper #kanbanMinhasSolicitacoes .kanban-card .cp-card-supplier,
:root:not(.light-mode) #minhasComprasWrapper #kanbanMinhasSolicitacoes .kanban-card .cp-card-summary,
:root:not(.light-mode) #minhasComprasWrapper #kanbanMinhasSolicitacoes .kanban-card span[style*="color:#374151"],
:root:not(.light-mode) #minhasComprasWrapper #kanbanMinhasSolicitacoes .kanban-card div[style*="color:#374151"] {
color: #18212b !important;
}
:root:not(.light-mode) #minhasComprasWrapper #kanbanMinhasSolicitacoes .kanban-card .cp-card-dates {
background: #fff5cc !important;
color: #526173 !important;
}
:root:not(.light-mode) #minhasComprasWrapper #kanbanMinhasSolicitacoes .kanban-card .cp-card-requester {
background: #e7f4fb !important;
color: #315e87 !important;
}
:root:not(.light-mode) #minhasComprasWrapper #kanbanMinhasSolicitacoes .kanban-card .cp-card-summary {
background: #ffffff !important;
color: #18212b !important;
border-color: #e5e9ee !important;
}
:root:not(.light-mode) #minhasComprasWrapper #kanbanMinhasSolicitacoes .kanban-card button[aria-label="Expandir"] {
background: #f1f5f9 !important;
color: #475569 !important;
border-color: #d8dee5 !important;
}
/* Identificação do produto: página operacional de conferência e impressão. */
#etiquetasModal.etiquetas-page {
position: relative !important;
inset: auto !important;
z-index: auto !important;
width: 100% !important;
height: 100% !important;
min-height: 0;
padding: 0 !important;
background: #f3f6f9 !important;
backdrop-filter: none !important;
overflow: hidden !important;
}
#etiquetasModal.etiquetas-page .etiquetas-modal-box {
display: flex;
flex-direction: column;
width: 100% !important;
max-width: none !important;
height: 100% !important;
max-height: none !important;
margin: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: #f3f6f9 !important;
box-shadow: none !important;
overflow: hidden !important;
}
#etiquetasModal.etiquetas-page .etiquetas-modal-header {
flex: 0 0 auto;
min-height: 64px;
padding: 12px 20px !important;
background: #0f1b30 !important;
border-bottom: 1px solid #24344f !important;
}
#etiquetasModal.etiquetas-page .etiquetas-page-subtitle {
margin: 3px 0 0;
color: #aebbd0;
font-size: 12px;
line-height: 1.35;
}
#etiquetasModal.etiquetas-page .etiquetas-modal-close {
display: none !important;
}
#etiquetasModal.etiquetas-page .etiquetas-modal-search-row,
#etiquetasModal.etiquetas-page .etq-impressora-row {
flex: 0 0 auto;
margin: 0 !important;
padding: 10px 20px !important;
background: #ffffff !important;
border-bottom: 1px solid #dbe3ec !important;
}
#etiquetasModal.etiquetas-page .etq-impressora-row {
margin: 8px 20px !important;
padding: 9px 12px !important;
background: #eef6ff !important;
border: 1px solid #9fc5ef !important;
border-left: 4px solid #2563a9 !important;
border-radius: 7px;
box-shadow: 0 2px 8px rgba(37, 99, 169, .08);
}
#etiquetasModal.etiquetas-page .etq-impressora-row > i {
color: #2563a9 !important;
font-size: 16px !important;
}
#etiquetasModal.etiquetas-page .etiquetas-search-wrap {
max-width: 760px;
background: #ffffff !important;
border-color: #aebdcd !important;
}
#etiquetasModal.etiquetas-page .etq-search-actions {
display: inline-flex;
align-items: center;
gap: 8px;
margin-left: auto;
flex: 0 0 auto;
}
#etiquetasModal.etiquetas-page .etq-btn-refresh {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 42px;
padding: 8px 14px;
color: #5b38b5;
background: #fff;
border: 1px solid #8b6fda;
border-radius: 6px;
font-size: 13px;
font-weight: 800;
cursor: pointer;
white-space: nowrap;
}
#etiquetasModal.etiquetas-page .etq-btn-refresh:hover {
background: #f5f1ff;
}
#etiquetasModal.etiquetas-page .etq-btn-refresh:disabled {
opacity: .65;
cursor: wait;
}
#etiquetasModal.etiquetas-page .etiquetas-search-wrap input,
#etiquetasModal.etiquetas-page .etq-listbox-impressora {
color: #18212b !important;
background: #ffffff !important;
}
#etiquetasModal.etiquetas-page .etq-listbox-impressora {
color-scheme: light;
min-height: 38px;
color: #142033 !important;
border: 1px solid #78a8d7 !important;
font-weight: 750;
}
#etiquetasModal.etiquetas-page .etq-listbox-impressora option,
#etiquetasModal.etiquetas-page .etq-listbox-impressora optgroup {
color: #18212b !important;
background: #ffffff !important;
}
#etiquetasModal.etiquetas-page .etq-impressora-row label {
color: #53657a !important;
font-weight: 650;
}
#etiquetasModal.etiquetas-page .etiquetas-search-wrap input::placeholder {
color: #718096 !important;
opacity: 1;
}
#etiquetasModal.etiquetas-page .etiquetas-modal-status {
flex: 0 0 auto;
min-height: 34px;
margin: 0 !important;
padding: 8px 20px !important;
color: #53657a !important;
background: #f8fafc;
border-bottom: 1px solid #dbe3ec;
}
#etiquetasModal.etiquetas-page .etiquetas-grid,
#etiquetasModal.etiquetas-page .etiquetas-grid.view-list {
display: block !important;
flex: 1 1 auto;
min-height: 0;
margin: 0 !important;
padding: 0 20px 20px !important;
overflow: auto !important;
background: #f3f6f9;
}
#etiquetasModal.etiquetas-page .etq-table-head,
#etiquetasModal.etiquetas-page .etq-card {
display: grid !important;
grid-template-columns: 68px minmax(260px, 1.5fr) minmax(170px, .85fr) minmax(160px, .8fr) 145px 105px minmax(220px, auto);
align-items: center;
column-gap: 14px;
}
#etiquetasModal.etiquetas-page .etq-table-head {
position: sticky;
top: 0;
z-index: 3;
min-width: 1180px;
min-height: 38px;
color: #53657a;
background: #e9eff5;
border: 1px solid #d2dce6;
border-top: 0;
font-size: 10px;
font-weight: 800;
letter-spacing: .055em;
text-transform: uppercase;
}
#etiquetasModal.etiquetas-page .etq-table-head > span:first-child {
text-align: center;
}
#etiquetasModal.etiquetas-page .etq-card,
#etiquetasModal.etiquetas-page .etiquetas-grid.view-list .etq-card {
position: relative;
min-width: 1180px;
min-height: 76px;
margin: 0 !important;
padding: 9px 12px !important;
color: #18212b !important;
background: #ffffff !important;
border: 1px solid #dbe3ec !important;
border-top: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
#etiquetasModal.etiquetas-page .etq-card:hover {
z-index: 1;
background: #f8fbff !important;
border-color: #9eb6cc !important;
}
#etiquetasModal.etiquetas-page .etq-card.selecionado {
background: #eef6ff !important;
box-shadow: inset 4px 0 #2563eb !important;
}
#etiquetasModal.etiquetas-page .etq-table-photo {
display: flex;
justify-content: center;
}
#etiquetasModal.etiquetas-page .cp-product-thumb {
width: 54px;
height: 54px;
border-radius: 6px;
background: #eef2f6;
}
#etiquetasModal.etiquetas-page .etq-table-product,
#etiquetasModal.etiquetas-page .etq-table-document,
#etiquetasModal.etiquetas-page .etq-table-received,
#etiquetasModal.etiquetas-page .etq-table-qty {
display: flex;
min-width: 0;
flex-direction: column;
gap: 4px;
}
#etiquetasModal.etiquetas-page .etq-table-product strong {
color: #142033;
font-size: 13px;
}
#etiquetasModal.etiquetas-page .etq-table-product span,
#etiquetasModal.etiquetas-page .etq-table-document span,
#etiquetasModal.etiquetas-page .etq-table-received span {
overflow: hidden;
color: #53657a;
font-size: 12px;
text-overflow: ellipsis;
white-space: nowrap;
}
#etiquetasModal.etiquetas-page .etq-table-lote {
display: flex;
min-width: 0;
flex-direction: column;
gap: 3px;
padding: 8px 10px;
color: #7a4100;
background: #fff2cc;
border-left: 4px solid #e59a18;
border-radius: 4px;
}
#etiquetasModal.etiquetas-page .etq-table-lote small {
font-size: 9px;
font-weight: 900;
letter-spacing: .08em;
}
#etiquetasModal.etiquetas-page .etq-table-lote strong {
overflow: hidden;
font-size: 13px;
text-overflow: ellipsis;
white-space: nowrap;
}
#etiquetasModal.etiquetas-page .etq-table-document strong {
color: #27364b;
font-size: 12px;
}
#etiquetasModal.etiquetas-page .etq-table-received strong {
color: #27364b;
font-size: 12px;
white-space: nowrap;
}
#etiquetasModal.etiquetas-page .etq-table-qty strong {
font-size: 14px;
color: #142033;
}
#etiquetasModal.etiquetas-page .etq-table-actions,
#etiquetasModal.etiquetas-page .etq-card-actions {
display: flex !important;
align-items: center;
justify-content: flex-end;
gap: 6px;
min-width: 0;
}
#etiquetasModal.etiquetas-page .etq-btn-imprimir-unit,
#etiquetasModal.etiquetas-page .etq-btn-multiplo,
#etiquetasModal.etiquetas-page .etq-btn-ocultar,
#etiquetasModal.etiquetas-page .etq-btn-reimprimir,
#etiquetasModal.etiquetas-page .etq-btn-excluir-identificacao {
min-height: 32px;
padding: 5px 9px !important;
border-radius: 5px !important;
white-space: nowrap;
}
#etiquetasModal.etiquetas-page .etq-btn-excluir-identificacao {
flex: 0 0 32px;
width: 32px;
max-width: 32px;
padding-inline: 0 !important;
color: #b42318;
background: #fff5f4;
border: 1px solid #f3aaa4;
font-size: 11px;
font-weight: 800;
cursor: pointer;
}
#etiquetasModal.etiquetas-page .etq-btn-excluir-identificacao span {
display: none;
}
#etiquetasModal.etiquetas-page .etq-btn-excluir-identificacao:hover {
color: #fff;
background: #c43228;
border-color: #c43228;
}
#etiquetasModal.etiquetas-page .etq-btn-excluir-identificacao:disabled {
cursor: wait;
opacity: .65;
}
/* Divisão de volumes: dois caminhos explícitos e prévia antes de imprimir. */
/* Tablet: mantém a leitura tabular, mas a ação operacional nunca sai da tela. */
@media (min-width: 769px) and (max-width: 1280px) {
#etiquetasModal.etiquetas-page .etiquetas-grid,
#etiquetasModal.etiquetas-page .etiquetas-grid.view-list {
padding-right: 10px !important;
padding-left: 10px !important;
}
#etiquetasModal.etiquetas-page .etq-table-head,
#etiquetasModal.etiquetas-page .etq-card {
grid-template-columns: 52px minmax(180px, 1.25fr) 145px 150px 82px 218px;
column-gap: 9px;
min-width: 840px;
}
#etiquetasModal.etiquetas-page .etq-table-head > span:last-child,
#etiquetasModal.etiquetas-page .etq-table-actions {
position: sticky;
right: 0;
z-index: 4;
min-width: 0;
padding: 7px 8px;
background: #ffffff;
box-shadow: -8px 0 12px -10px rgba(15, 23, 42, .65);
}
#etiquetasModal.etiquetas-page .etq-table-head > span:last-child {
align-self: stretch;
display: flex;
align-items: center;
justify-content: flex-end;
background: #e9eff5;
}
#etiquetasModal.etiquetas-page .etq-card.selecionado .etq-table-actions {
background: #eef6ff;
}
#etiquetasModal.etiquetas-page .etq-btn-multiplo {
display: inline-flex;
flex: 1 1 auto;
justify-content: center;
min-width: 118px;
}
}
#etqMultiploModal .etq-multiplo-box {
width: min(680px, calc(100vw - 32px)) !important;
max-height: calc(100vh - 32px);
color: #18212b;
background: #f7f9fc !important;
border: 1px solid #b9c6d4 !important;
border-radius: 8px !important;
overflow: auto;
}
#etqMultiploModal .etq-multiplo-header {
position: sticky;
top: 0;
z-index: 2;
min-height: 52px;
background: #0f1b30 !important;
border-bottom: 1px solid #263853 !important;
}
#etqMultiploModal .etq-divisao-total {
margin: 10px 16px 0;
padding: 10px 12px;
color: #53657a;
background: #e9eff5;
border-radius: 5px;
font-size: 13px;
}
#etqMultiploModal .etq-divisao-total strong {
color: #142033;
font-size: 15px;
}
#etqMultiploModal .etq-divisao-modos {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
padding: 12px 16px;
}
#etqMultiploModal .etq-divisao-modo {
display: flex;
align-items: flex-start;
gap: 10px;
min-height: 88px;
padding: 12px;
color: #314158;
text-align: left;
background: #ffffff;
border: 1px solid #cbd6e1;
border-radius: 7px;
cursor: pointer;
}
#etqMultiploModal .etq-divisao-modo:hover,
#etqMultiploModal .etq-divisao-modo:focus-visible {
border-color: #7896b5;
outline: none;
}
#etqMultiploModal .etq-divisao-modo.ativo {
color: #173d76;
background: #edf5ff;
border: 2px solid #3976c6;
box-shadow: 0 0 0 2px rgba(57, 118, 198, .12);
}
#etqMultiploModal .etq-divisao-modo > i {
margin-top: 2px;
color: #3976c6;
font-size: 17px;
}
#etqMultiploModal .etq-divisao-modo span {
display: flex;
flex-direction: column;
gap: 5px;
}
#etqMultiploModal .etq-divisao-modo strong {
font-size: 13px;
line-height: 1.25;
}
#etqMultiploModal .etq-divisao-modo small {
color: #66788d;
font-size: 11px;
line-height: 1.4;
}
#etqMultiploModal .etq-divisao-input-row {
display: grid;
grid-template-columns: minmax(230px, 1fr) minmax(160px, 220px);
align-items: center;
gap: 14px;
padding: 2px 16px 10px;
}
#etqMultiploModal .etq-divisao-input-row label {
color: #26364b;
font-size: 13px;
font-weight: 700;
}
#etqMultiploModal #etqMultiploInput {
width: 100%;
height: 42px;
padding: 0 12px;
color: #142033;
background: #ffffff;
border: 1px solid #96a9bd;
border-radius: 6px;
font-size: 15px;
outline: none;
}
#etqMultiploModal #etqMultiploInput:focus {
border-color: #3976c6;
box-shadow: 0 0 0 3px rgba(57, 118, 198, .16);
}
#etqMultiploModal .etq-divisao-sugestoes {
padding: 0 16px 10px;
}
#etqMultiploModal .etq-divisao-sugestoes > span {
display: block;
margin-bottom: 7px;
color: #66788d;
font-size: 11px;
}
#etqMultiploModal .etq-multiplo-chip {
color: #314158 !important;
background: #ffffff !important;
border-color: #b8c6d5 !important;
}
#etqMultiploModal .etq-multiplo-chip:hover,
#etqMultiploModal .etq-multiplo-chip.ativo {
color: #ffffff !important;
background: #3976c6 !important;
border-color: #3976c6 !important;
}
#etqMultiploModal .etq-multiplo-preview {
min-height: 64px;
margin: 0 16px !important;
padding: 12px 14px !important;
color: #314158 !important;
background: #eef3f8 !important;
border: 1px solid #cad6e2;
border-radius: 6px !important;
font-size: 13px;
line-height: 1.5;
}
#etqMultiploModal .etq-multiplo-preview b {
color: #1c5fae;
}
#etqMultiploModal .etq-multiplo-printer {
display: grid;
grid-template-columns: minmax(190px, .7fr) minmax(260px, 1.3fr);
align-items: center;
gap: 12px;
margin: 10px 16px 0;
padding: 11px 12px;
background: #eef6ff;
border: 1px solid #9fc5ef;
border-left: 4px solid #2563a9;
border-radius: 7px;
}
#etqMultiploModal .etq-multiplo-printer-label {
display: flex;
align-items: center;
gap: 9px;
color: #2563a9;
}
#etqMultiploModal .etq-multiplo-printer-label > i { font-size: 17px; }
#etqMultiploModal .etq-multiplo-printer-label > span {
display: flex;
flex-direction: column;
gap: 2px;
}
#etqMultiploModal .etq-multiplo-printer-label small {
color: #607187;
font-size: 9px;
font-weight: 900;
letter-spacing: .08em;
}
#etqMultiploModal .etq-multiplo-printer-label strong {
color: #173d76;
font-size: 12px;
}
#etqMultiploModal #etqMultiploImpressora {
width: 100%;
min-width: 0;
min-height: 42px;
padding: 0 10px;
color: #142033;
background: #fff;
border: 1px solid #78a8d7;
border-radius: 6px;
font-size: 13px;
font-weight: 750;
color-scheme: light;
}
#etqMultiploModal #etqMultiploImpressora option,
#etqMultiploModal #etqMultiploImpressora optgroup {
color: #142033;
background: #fff;
}
#etqMultiploModal .etq-preview-alerta {
color: #9a3412;
font-weight: 650;
}
#etqMultiploModal .etq-multiplo-btn-cancel {
color: #52647a !important;
background: #ffffff !important;
border-color: #b8c6d5 !important;
}
#etqMultiploModal .etq-multiplo-btn-gerar {
background: #2563a9 !important;
}
#etqMultiploModal .etq-multiplo-btn-gerar:disabled {
background: #8da0b4 !important;
}
@media (max-width: 768px) {
#etiquetasModal.etiquetas-page {
min-height: 100dvh;
overflow: hidden !important;
}
#etiquetasModal.etiquetas-page .etiquetas-modal-header,
#etiquetasModal.etiquetas-page .etiquetas-modal-search-row,
#etiquetasModal.etiquetas-page .etq-impressora-row {
padding-left: 12px !important;
padding-right: 12px !important;
}
#etiquetasModal.etiquetas-page .etiquetas-modal-header {
min-height: 58px;
padding-top: 9px !important;
padding-bottom: 9px !important;
}
#etiquetasModal.etiquetas-page .etiquetas-modal-header h3 {
font-size: 17px !important;
}
#etiquetasModal.etiquetas-page .etiquetas-page-subtitle {
max-width: 320px;
font-size: 11px;
}
#etiquetasModal.etiquetas-page .etiquetas-modal-search-row {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto;
align-items: stretch !important;
gap: 8px !important;
padding-top: 9px !important;
padding-bottom: 9px !important;
}
#etiquetasModal.etiquetas-page .etiquetas-search-wrap {
width: 100%;
min-width: 0;
max-width: none;
min-height: 42px;
box-sizing: border-box;
}
#etiquetasModal.etiquetas-page .etq-view-toggle {
width: 42px;
}
#etiquetasModal.etiquetas-page .etq-search-actions {
margin-left: 0;
}
#etiquetasModal.etiquetas-page .etq-btn-refresh {
min-width: 42px;
padding: 8px 10px;
}
#etiquetasModal.etiquetas-page .etq-btn-refresh span {
display: none;
}
#etiquetasModal.etiquetas-page .etiquetas-btn-imprimir-sel {
grid-column: 1 / -1;
width: 100%;
min-height: 42px;
justify-content: center;
}
#etiquetasModal.etiquetas-page .etq-impressora-row {
display: grid !important;
grid-template-columns: auto minmax(0, 1fr) 42px;
gap: 7px !important;
padding-top: 8px !important;
padding-bottom: 8px !important;
margin: 8px 12px !important;
}
#etiquetasModal.etiquetas-page .etq-impressora-row > i {
grid-column: 1;
grid-row: 1;
}
#etiquetasModal.etiquetas-page .etq-impressora-row label {
grid-column: 2 / 4;
grid-row: 1;
}
#etiquetasModal.etiquetas-page .etq-listbox-impressora {
grid-column: 1 / 3;
grid-row: 2;
width: 100%;
min-width: 0;
min-height: 42px;
}
#etiquetasModal.etiquetas-page #etqBtnRefreshImpressoras {
grid-column: 3;
grid-row: 2;
width: 42px;
min-height: 42px;
}
#etiquetasModal.etiquetas-page .etiquetas-modal-status {
min-height: 30px;
padding: 6px 12px !important;
font-size: 12px;
}
#etiquetasModal.etiquetas-page .etiquetas-grid,
#etiquetasModal.etiquetas-page .etiquetas-grid.view-list {
padding: 0 10px 14px !important;
overflow-x: hidden !important;
overflow-y: auto !important;
}
#etiquetasModal.etiquetas-page .etq-table-head {
display: none !important;
}
#etiquetasModal.etiquetas-page .etq-card,
#etiquetasModal.etiquetas-page .etiquetas-grid.view-list .etq-card {
grid-template-columns: 64px minmax(0, 1fr) !important;
grid-template-areas:
"photo product"
"photo qty"
"lot lot"
"received received"
"actions actions";
gap: 7px 10px;
width: 100%;
min-width: 0;
min-height: 0;
margin-top: 9px !important;
padding: 10px !important;
border-top: 1px solid #dbe3ec !important;
border-radius: 8px !important;
box-sizing: border-box;
}
#etiquetasModal.etiquetas-page .etq-table-photo {
grid-area: photo;
align-self: start;
justify-content: flex-start;
}
#etiquetasModal.etiquetas-page .cp-product-thumb {
width: 62px;
height: 62px;
}
#etiquetasModal.etiquetas-page .etq-table-product {
grid-area: product;
gap: 3px;
}
#etiquetasModal.etiquetas-page .etq-table-product strong {
font-size: 14px;
}
#etiquetasModal.etiquetas-page .etq-table-product span {
display: -webkit-box;
overflow: hidden;
font-size: 12px;
line-height: 1.35;
white-space: normal;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
#etiquetasModal.etiquetas-page .etq-table-qty {
grid-area: qty;
flex-direction: row;
align-items: baseline;
gap: 5px;
}
#etiquetasModal.etiquetas-page .etq-table-qty::before {
content: "Quantidade:";
color: #66788d;
font-size: 11px;
}
#etiquetasModal.etiquetas-page .etq-table-lote {
grid-area: lot;
flex-direction: row;
align-items: center;
gap: 7px;
padding: 6px 8px;
}
#etiquetasModal.etiquetas-page .etq-table-lote small::after {
content: ":";
}
#etiquetasModal.etiquetas-page .etq-table-lote strong {
font-size: 12px;
}
#etiquetasModal.etiquetas-page .etq-table-document {
display: none !important;
}
#etiquetasModal.etiquetas-page .etq-table-received {
grid-area: received;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 4px 1px;
}
#etiquetasModal.etiquetas-page .etq-table-actions {
grid-area: actions;
width: 100%;
padding-top: 8px;
border-top: 1px solid #e4eaf0;
}
#etiquetasModal.etiquetas-page .etq-card-actions {
width: 100%;
}
#etiquetasModal.etiquetas-page .etq-check-sel {
width: 24px;
height: 24px;
flex: 0 0 24px;
}
#etiquetasModal.etiquetas-page .etq-btn-multiplo {
flex: 1 1 auto;
min-height: 42px;
justify-content: center;
font-size: 13px;
}
#etiquetasModal.etiquetas-page .etq-btn-ocultar {
flex: 0 0 42px;
width: 42px;
min-height: 42px;
padding: 0 !important;
}
#etiquetasModal.etiquetas-page .etq-btn-excluir-identificacao {
flex-basis: 42px;
width: 42px;
max-width: 42px;
min-height: 42px;
font-size: 12px;
}
}
@media (max-width: 640px) {
#etqMultiploModal {
align-items: flex-end !important;
padding: 0 !important;
}
#etqMultiploModal .etq-multiplo-box {
width: 100% !important;
max-height: 94dvh;
border-right: 0 !important;
border-bottom: 0 !important;
border-left: 0 !important;
border-radius: 14px 14px 0 0 !important;
overscroll-behavior: contain;
}
#etqMultiploModal .etq-multiplo-header {
min-height: 50px;
padding: 10px 14px !important;
}
#etqMultiploModal .etq-card-thumbnail {
min-height: 50px !important;
margin: 10px 12px 6px !important;
}
#etqMultiploModal .etq-divisao-total {
margin: 8px 12px 0;
padding: 8px 10px;
}
#etqMultiploModal .etq-divisao-modos,
#etqMultiploModal .etq-divisao-input-row {
grid-template-columns: 1fr;
}
#etqMultiploModal .etq-divisao-modos {
gap: 7px;
padding: 9px 12px;
}
#etqMultiploModal .etq-divisao-modo {
min-height: 0;
padding: 9px 10px;
}
#etqMultiploModal .etq-divisao-input-row {
gap: 6px;
padding: 2px 12px 9px;
}
#etqMultiploModal #etqMultiploInput {
height: 46px;
font-size: 16px;
}
#etqMultiploModal .etq-divisao-sugestoes {
padding: 0 12px 9px;
}
#etqMultiploModal .etq-multiplo-preview {
min-height: 0;
margin: 0 12px !important;
padding: 10px 12px !important;
}
#etqMultiploModal .etq-multiplo-printer {
grid-template-columns: 1fr;
gap: 8px;
margin: 9px 12px 0;
padding: 10px;
}
#etqMultiploModal .etq-multiplo-footer {
position: sticky;
bottom: 0;
z-index: 2;
display: grid !important;
grid-template-columns: minmax(100px, .7fr) minmax(0, 1.3fr);
gap: 8px !important;
padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) !important;
background: #f7f9fc;
border-top: 1px solid #d2dce6;
}
#etqMultiploModal .etq-multiplo-footer button {
min-height: 44px;
padding: 8px 10px !important;
}
}
/* Navegação direta entre as duas etapas do fluxo de almoxarifado. */
.etq-page-shortcut {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 38px;
margin-left: auto;
padding: 7px 12px;
color: #082f24;
background: #6ee7b7;
border: 1px solid #34d399;
border-radius: 6px;
font-size: 13px;
font-weight: 800;
cursor: pointer;
}
.etq-page-shortcut:hover,
.etq-page-shortcut:focus-visible {
background: #a7f3d0;
outline: 2px solid rgba(110, 231, 183, .35);
outline-offset: 2px;
}
.etq-page-shortcut--secondary {
color: #e7eef8;
background: #263853;
border-color: #425776;
}
.etq-flow-step {
display: block;
margin-bottom: 2px;
font-size: 9px;
font-weight: 900;
letter-spacing: .1em;
line-height: 1;
}
.etq-flow-step--identify { color: #c4b5fd; }
.etq-flow-step--store { color: #6ee7b7; }
/* Guardar materiais: a antiga grade de etiquetas passa a ser uma página operacional. */
#etqImpressoModal.etiquetas-page {
position: relative !important;
inset: auto !important;
z-index: auto !important;
width: 100% !important;
height: 100% !important;
min-height: 0;
padding: 0 !important;
background: #f3f6f9 !important;
backdrop-filter: none !important;
overflow: hidden !important;
}
#etqImpressoModal.etiquetas-page .etiquetas-modal-box {
display: flex;
flex-direction: column;
width: 100% !important;
max-width: none !important;
height: 100% !important;
max-height: none !important;
margin: 0 !important;
color: #18212b;
background: #f3f6f9 !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
overflow: hidden !important;
}
#etqImpressoModal.etiquetas-page .etiquetas-modal-header {
flex: 0 0 auto;
min-height: 64px;
padding: 12px 20px !important;
background: #073c34 !important;
border-bottom: 3px solid #34d399 !important;
}
#etqImpressoModal.etiquetas-page .etiquetas-modal-close {
display: none !important;
}
#etqImpressoModal.etiquetas-page .etiquetas-modal-search-row {
flex: 0 0 auto;
margin: 0 !important;
padding: 10px 20px !important;
background: #fff !important;
border-bottom: 1px solid #dbe3ec !important;
}
#etqImpressoModal.etiquetas-page .etq-search-actions {
display: inline-flex;
align-items: center;
gap: 8px;
margin-left: auto;
flex: 0 0 auto;
}
#etqImpressoModal.etiquetas-page .etq-btn-refresh {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 42px;
padding: 8px 14px;
color: #08775a;
background: #fff;
border: 1px solid #08775a;
border-radius: 6px;
font-size: 13px;
font-weight: 800;
cursor: pointer;
white-space: nowrap;
}
#etqImpressoModal.etiquetas-page .etq-btn-refresh:hover {
background: #ecfdf5;
}
#etqImpressoModal.etiquetas-page .etq-btn-refresh:disabled {
opacity: .65;
cursor: wait;
}
#etqImpressoModal.etiquetas-page .etq-btn-scan {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 42px;
margin-left: 0;
padding: 8px 14px;
color: #fff;
background: #08775a;
border: 1px solid #06624b;
border-radius: 6px;
font-size: 13px;
font-weight: 800;
cursor: pointer;
white-space: nowrap;
}
#etqImpressoModal.etiquetas-page .etiquetas-search-wrap {
width: min(760px, 100%);
max-width: 760px;
min-height: 42px;
color: #18212b;
background: #fff !important;
border-color: #aebdcd !important;
}
#etqImpressoModal.etiquetas-page .etiquetas-search-wrap input {
color: #18212b !important;
}
#etqImpressoModal.etiquetas-page .etiquetas-search-wrap input::placeholder {
color: #718096 !important;
opacity: 1;
}
#etqImpressoModal.etiquetas-page .etiquetas-modal-status {
flex: 0 0 auto;
min-height: 34px;
margin: 0 !important;
padding: 8px 20px !important;
color: #53657a !important;
background: #f8fafc;
border-bottom: 1px solid #dbe3ec;
}
.etq-store-destination {
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: 10px 20px;
color: #12372f;
background: #e9fbf4;
border-bottom: 1px solid #a7e8d2;
}
.etq-store-destination__identity,
.etq-store-destination__control,
.etq-scan-destination {
display: flex;
align-items: center;
gap: 10px;
}
.etq-store-destination__icon,
.etq-scan-destination__icon {
display: grid;
flex: 0 0 auto;
width: 38px;
height: 38px;
color: #fff;
background: #08775a;
border-radius: 8px;
place-items: center;
}
.etq-store-destination small,
.etq-scan-destination small {
display: block;
margin-bottom: 2px;
color: #08775a;
font-size: 9px;
font-weight: 900;
letter-spacing: .08em;
}
.etq-store-destination__identity strong { font-size: 13px; }
.etq-store-destination__control {
min-width: min(470px, 48vw);
justify-content: flex-end;
}
.etq-store-destination__control > span {
color: #53657a;
font-size: 12px;
font-weight: 750;
}
.etq-store-destination select,
.etq-scan-destination select {
min-height: 40px;
padding: 7px 34px 7px 10px;
color: #073c34;
background: #fff;
border: 1px solid #55b99b;
border-radius: 6px;
font-size: 13px;
font-weight: 850;
}
.etq-scan-destination {
position: sticky;
top: 56px;
z-index: 2;
padding: 9px 16px;
background: #e9fbf4;
border-bottom: 1px solid #a7e8d2;
}
.etq-scan-destination label { flex: 1; min-width: 0; }
.etq-scan-destination select { width: 100%; }
#etqImpressoModal.etiquetas-page .etiquetas-grid {
display: block !important;
flex: 1 1 auto;
min-height: 0;
margin: 0 !important;
padding: 0 20px 20px !important;
background: #f3f6f9;
overflow: auto !important;
}
#etqImpressoModal.etiquetas-page .etq-table-head,
#etqImpressoModal.etiquetas-page .etq-store-row {
display: grid !important;
grid-template-columns: 68px minmax(250px, 1.45fr) minmax(170px, .8fr) minmax(190px, 1fr) 110px minmax(180px, .85fr) 232px;
align-items: center;
column-gap: 14px;
min-width: 1190px;
}
#etqImpressoModal.etiquetas-page .etq-table-head {
position: sticky;
top: 0;
z-index: 3;
min-height: 38px;
color: #53657a;
background: #e9eff5;
border: 1px solid #d2dce6;
border-top: 0;
font-size: 10px;
font-weight: 800;
letter-spacing: .055em;
text-transform: uppercase;
}
#etqImpressoModal.etiquetas-page .etq-store-row {
min-height: 78px;
padding: 9px 12px !important;
color: #18212b !important;
background: #fff !important;
border: 1px solid #dbe3ec !important;
border-top: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
cursor: pointer;
}
#etqImpressoModal.etiquetas-page .etq-store-row:hover,
#etqImpressoModal.etiquetas-page .etq-store-row:focus-visible {
z-index: 1;
background: #f5fbf8 !important;
border-color: #7fc7ad !important;
outline: none;
}
#etqImpressoModal.etiquetas-page .etq-table-photo,
#etqImpressoModal.etiquetas-page .etq-table-product,
#etqImpressoModal.etiquetas-page .etq-table-document,
#etqImpressoModal.etiquetas-page .etq-table-qty,
#etqImpressoModal.etiquetas-page .etq-store-meta {
display: flex;
min-width: 0;
flex-direction: column;
gap: 4px;
}
#etqImpressoModal.etiquetas-page .etq-table-photo {
align-items: center;
}
#etqImpressoModal.etiquetas-page .cp-product-thumb {
width: 54px;
height: 54px;
border-radius: 6px;
background: #eef2f6;
}
#etqImpressoModal.etiquetas-page .etq-table-product strong,
#etqImpressoModal.etiquetas-page .etq-table-lote strong,
#etqImpressoModal.etiquetas-page .etq-table-document strong,
#etqImpressoModal.etiquetas-page .etq-table-qty strong {
color: #142033;
font-size: 13px;
}
#etqImpressoModal.etiquetas-page .etq-table-product span,
#etqImpressoModal.etiquetas-page .etq-table-document span,
#etqImpressoModal.etiquetas-page .etq-table-qty span,
#etqImpressoModal.etiquetas-page .etq-store-meta span {
overflow: hidden;
color: #607187;
font-size: 11px;
line-height: 1.35;
text-overflow: ellipsis;
white-space: nowrap;
}
#etqImpressoModal.etiquetas-page .etq-table-lote {
display: flex;
min-width: 0;
flex-direction: column;
gap: 3px;
padding: 2px 0;
color: #607187;
background: transparent;
border: 0;
border-radius: 0;
}
#etqImpressoModal.etiquetas-page .etq-table-lote small {
font-size: 9px;
font-weight: 900;
letter-spacing: .08em;
}
#etqImpressoModal.etiquetas-page .etq-store-id {
color: #08664f;
font-size: 17px;
font-weight: 900;
letter-spacing: .02em;
}
#etqImpressoModal.etiquetas-page .etq-store-meta .is-address {
color: #08775a;
font-weight: 750;
}
/* Ação: Reimprimir + Retornar na 1ª linha, Guardar material ocupando a 2ª. */
#etqImpressoModal.etiquetas-page .etq-table-actions {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
justify-content: flex-end;
gap: 6px;
}
#etqImpressoModal.etiquetas-page .etq-btn-guardar {
grid-column: 1 / -1;
}
#etqImpressoModal.etiquetas-page .etq-btn-guardar,
#etqImpressoModal.etiquetas-page .etq-btn-retornar,
#etqImpressoModal.etiquetas-page .etq-btn-reimprimir {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
min-height: 38px;
padding: 7px 11px;
color: #fff;
background: #08775a;
border: 1px solid #06624b;
border-radius: 6px;
font-size: 12px;
font-weight: 800;
cursor: pointer;
white-space: nowrap;
}
#etqImpressoModal.etiquetas-page .etq-btn-reimprimir {
color: #1d4f7a;
background: #eef6ff;
border-color: #8bb9e3;
}
#etqImpressoModal.etiquetas-page .etq-btn-retornar {
color: #6b21a8;
background: #f6f0ff;
border-color: #c4b0e8;
}
#etqImpressoModal.etiquetas-page .etq-btn-reimprimir:disabled,
#etqImpressoModal.etiquetas-page .etq-btn-retornar:disabled,
#etqImpressoModal.etiquetas-page .etq-btn-guardar:disabled {
opacity: .65;
cursor: wait;
}
/* Tablet: fixa as duas ações de armazenamento na borda visível. */
@media (min-width: 769px) and (max-width: 1280px) {
#etqImpressoModal.etiquetas-page .etiquetas-grid {
padding-right: 10px !important;
padding-left: 10px !important;
}
#etqImpressoModal.etiquetas-page .etq-table-head,
#etqImpressoModal.etiquetas-page .etq-store-row {
grid-template-columns: 52px minmax(175px, 1.2fr) 130px 145px 78px 145px 265px;
column-gap: 9px;
min-width: 1010px;
}
#etqImpressoModal.etiquetas-page .etq-table-head > span:last-child,
#etqImpressoModal.etiquetas-page .etq-table-actions {
position: sticky;
right: 0;
z-index: 4;
min-width: 0;
padding: 7px 8px;
background: #ffffff;
box-shadow: -8px 0 12px -10px rgba(15, 23, 42, .65);
}
#etqImpressoModal.etiquetas-page .etq-table-head > span:last-child {
align-self: stretch;
display: flex;
align-items: center;
justify-content: flex-end;
background: #e9eff5;
}
#etqImpressoModal.etiquetas-page .etq-store-row:hover .etq-table-actions,
#etqImpressoModal.etiquetas-page .etq-store-row:focus-visible .etq-table-actions {
background: #f5fbf8;
}
#etqImpressoModal.etiquetas-page .etq-btn-reimprimir,
#etqImpressoModal.etiquetas-page .etq-btn-retornar,
#etqImpressoModal.etiquetas-page .etq-btn-guardar {
display: inline-flex;
min-width: 0;
}
}
/* Em tablets estreitos, ações ganham uma linha própria e não dependem de scroll. */
@media (min-width: 769px) and (max-width: 1280px) {
#etiquetasModal.etiquetas-page .etiquetas-grid,
#etiquetasModal.etiquetas-page .etiquetas-grid.view-list,
#etqImpressoModal.etiquetas-page .etiquetas-grid {
overflow-x: hidden !important;
}
#etiquetasModal.etiquetas-page .etq-table-head,
#etqImpressoModal.etiquetas-page .etq-table-head {
display: none !important;
}
#etiquetasModal.etiquetas-page .etq-card,
#etiquetasModal.etiquetas-page .etiquetas-grid.view-list .etq-card {
grid-template-columns: 52px minmax(0, 1fr) minmax(125px, .7fr) 82px;
grid-template-areas:
"photo product lot qty"
"photo document document qty"
"photo received received qty"
"actions actions actions actions";
gap: 7px 10px;
width: 100%;
min-width: 0;
min-height: 0;
margin-top: 8px !important;
padding: 9px 10px !important;
border-top: 1px solid #dbe3ec !important;
border-radius: 7px !important;
box-sizing: border-box;
}
#etiquetasModal.etiquetas-page .etq-table-photo { grid-area: photo; }
#etiquetasModal.etiquetas-page .etq-table-product { grid-area: product; }
#etiquetasModal.etiquetas-page .etq-table-lote { grid-area: lot; }
#etiquetasModal.etiquetas-page .etq-table-document { grid-area: document; }
#etiquetasModal.etiquetas-page .etq-table-received { grid-area: received; }
#etiquetasModal.etiquetas-page .etq-table-qty { grid-area: qty; }
#etiquetasModal.etiquetas-page .etq-table-actions {
grid-area: actions;
position: static;
right: auto;
width: 100%;
padding: 7px 0 0;
background: transparent;
border-top: 1px solid #e4eaf0;
box-shadow: none;
}
#etiquetasModal.etiquetas-page .etq-btn-multiplo {
flex: 1 1 auto;
max-width: 220px;
}
#etqImpressoModal.etiquetas-page .etq-store-row {
grid-template-columns: 52px minmax(0, 1fr) minmax(125px, .7fr) 82px;
grid-template-areas:
"photo product lot qty"
"photo document meta meta"
"actions actions actions actions";
gap: 7px 10px;
width: 100%;
min-width: 0;
min-height: 0;
margin-top: 8px !important;
padding: 9px 10px !important;
border-top: 1px solid #dbe3ec !important;
border-radius: 7px !important;
box-sizing: border-box;
}
#etqImpressoModal.etiquetas-page .etq-table-photo { grid-area: photo; }
#etqImpressoModal.etiquetas-page .etq-table-product { grid-area: product; }
#etqImpressoModal.etiquetas-page .etq-table-lote { grid-area: lot; }
#etqImpressoModal.etiquetas-page .etq-table-document { grid-area: document; }
#etqImpressoModal.etiquetas-page .etq-table-qty { grid-area: qty; }
#etqImpressoModal.etiquetas-page .etq-store-meta { grid-area: meta; }
#etqImpressoModal.etiquetas-page .etq-table-actions {
grid-area: actions;
position: static;
right: auto;
display: flex !important;
width: 100%;
padding: 7px 0 0;
background: transparent;
border-top: 1px solid #e4eaf0;
box-shadow: none;
}
#etqImpressoModal.etiquetas-page .etq-btn-reimprimir,
#etqImpressoModal.etiquetas-page .etq-btn-retornar,
#etqImpressoModal.etiquetas-page .etq-btn-guardar {
flex: 1 1 0;
min-width: 0;
}
}
.etq-scan-confirm {
grid-template-columns: 42px minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
margin: 0 18px 12px;
padding: 12px;
color: #d1fae5;
background: #064e3b;
border: 1px solid #10b981;
border-radius: 8px;
}
.etq-batch-store {
margin: 10px 16px 12px;
padding: 10px;
color: #172334;
background: #fff;
border: 1px solid #c8d5e1;
border-radius: 7px;
}
.etq-batch-store__summary,
.etq-batch-store__actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.etq-batch-store__summary span {
display: inline-flex;
align-items: center;
gap: 7px;
color: #0b6652;
font-size: 13px;
font-weight: 850;
}
.etq-batch-store__summary strong {
color: #53657a;
font-size: 12px;
}
.etq-batch-store__list {
display: grid;
gap: 6px;
max-height: 190px;
margin: 9px 0;
overflow-y: auto;
}
.etq-batch-store__empty {
padding: 14px 10px;
color: #68798c;
background: #f3f6f9;
border: 1px dashed #b8c5d1;
border-radius: 6px;
text-align: center;
font-size: 12px;
}
.etq-batch-store__item {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto auto;
align-items: center;
gap: 9px;
padding: 8px;
background: #f3f8f6;
border-left: 3px solid #10b981;
border-radius: 5px;
}
.etq-batch-store__id {
padding: 4px 6px;
color: #fff;
background: #08775a;
border-radius: 4px;
font-size: 11px;
font-weight: 900;
}
.etq-batch-store__product {
min-width: 0;
}
.etq-batch-store__product strong,
.etq-batch-store__product small {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.etq-batch-store__product strong { font-size: 12px; }
.etq-batch-store__product small { margin-top: 2px; color: #68798c; font-size: 10px; }
.etq-batch-store__qty { color: #172334; font-size: 12px; font-weight: 850; white-space: nowrap; }
.etq-batch-store__remove {
display: grid;
width: 30px;
height: 30px;
padding: 0;
color: #a33232;
background: #fff;
border: 1px solid #e4b8b8;
border-radius: 5px;
cursor: pointer;
place-items: center;
}
.etq-batch-store__actions {
padding-top: 9px;
border-top: 1px solid #e0e7ed;
}
.etq-batch-store__actions button {
min-height: 40px;
padding: 8px 12px;
border-radius: 6px;
font-size: 12px;
font-weight: 850;
cursor: pointer;
}
.etq-batch-store__clear { color: #8f2e2e; background: #fff; border: 1px solid #dcb4b4; }
.etq-batch-store__finish { color: #fff; background: #08775a; border: 1px solid #06624b; }
.etq-batch-store__actions button:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 520px) {
.etq-batch-store__item { grid-template-columns: auto minmax(0, 1fr) auto; }
.etq-batch-store__qty { grid-column: 2; }
.etq-batch-store__remove { grid-column: 3; grid-row: 1 / span 2; }
.etq-batch-store__actions { align-items: stretch; flex-direction: column-reverse; }
.etq-batch-store__actions button { width: 100%; }
}
.etq-scan-confirm-icon {
display: grid;
width: 42px;
height: 42px;
place-items: center;
color: #6ee7b7;
background: rgba(110, 231, 183, .12);
border-radius: 50%;
font-size: 20px;
}
.etq-scan-confirm > div:nth-child(2) {
display: flex;
min-width: 0;
flex-direction: column;
gap: 3px;
}
.etq-scan-confirm strong { font-size: 14px; }
.etq-scan-confirm span { color: #a7f3d0; font-size: 12px; line-height: 1.35; }
.etq-scan-confirm button {
min-height: 40px;
padding: 8px 12px;
color: #064e3b;
background: #6ee7b7;
border: 0;
border-radius: 6px;
font-weight: 850;
cursor: pointer;
}
/* Leitura e endereçamento: painel claro, guiado e adequado para câmera ou bipador. */
#etqArmazenarModal.etq-scan-modal,
#listaProdutosQrModal.etq-scan-modal {
padding: 18px !important;
background: rgba(15, 23, 42, .62) !important;
backdrop-filter: blur(6px) !important;
}
#etqArmazenarModal .etq-scan-box,
#listaProdutosQrModal .etq-scan-box {
box-sizing: border-box;
width: min(680px, calc(100vw - 36px)) !important;
max-width: 680px !important;
max-height: calc(100dvh - 36px);
color: #18212b;
background: #f8fafc !important;
border: 1px solid #b9c8d7 !important;
border-radius: 10px !important;
box-shadow: 0 24px 70px rgba(15, 23, 42, .35) !important;
overflow: auto !important;
}
#etqArmazenarModal .etq-scan-header,
#listaProdutosQrModal .etq-scan-header {
position: sticky;
top: 0;
z-index: 3;
min-height: 56px;
padding: 11px 16px !important;
background: #073c34 !important;
border-bottom: 3px solid #34d399 !important;
}
#etqArmazenarModal .etq-scan-camera,
#listaProdutosQrModal .etq-scan-camera {
aspect-ratio: 16 / 7 !important;
background: #101827 !important;
}
#etqArmazenarModal.is-camera-unavailable .etq-scan-camera::after,
#listaProdutosQrModal.is-camera-unavailable .etq-scan-camera::after {
content: "Câmera indisponível · use o bipador ou digite o código";
position: absolute;
inset: 0;
z-index: 2;
display: grid;
padding: 20px;
color: #aebbd0;
background: #101827;
place-items: center;
text-align: center;
font-size: 13px;
}
#etqArmazenarModal #etqArmazenarStatus,
#listaProdutosQrModal #listaProdutosQrStatus {
min-height: 38px !important;
padding: 9px 16px !important;
color: #53657a !important;
background: #eef3f7;
border-bottom: 1px solid #dbe3ec;
}
#etqArmazenarModal #etqArmazenarInput,
#etqArmazenarModal #etqArmazenarComplemento,
#listaProdutosQrModal #listaProdutosQrInput {
min-height: 44px;
color: #142033 !important;
background: #fff !important;
border: 1px solid #9fb0c2 !important;
border-radius: 6px !important;
font-size: 15px !important;
}
#etqArmazenarModal #etqArmazenarInput::placeholder,
#etqArmazenarModal #etqArmazenarComplemento::placeholder,
#listaProdutosQrModal #listaProdutosQrInput::placeholder {
color: #718096;
opacity: 1;
}
#etqArmazenarModal #etqArmazenarOk,
#listaProdutosQrModal #listaProdutosQrOk {
min-width: 48px;
min-height: 44px;
border-radius: 6px !important;
}
.etq-scan-locations-trigger {
align-items: center;
justify-content: flex-start;
gap: 8px;
width: calc(100% - 32px);
min-height: 40px;
margin: 10px 16px 0;
padding: 8px 11px;
color: #0c624d;
background: #ecfdf5;
border: 1px solid #a7e8d2;
border-radius: 6px;
font-size: 12px;
font-weight: 800;
cursor: pointer;
text-align: left;
}
.etq-scan-locations-trigger .fa-chevron-down {
margin-left: auto;
transition: transform .18s ease;
}
.etq-scan-locations-trigger.is-open .fa-chevron-down { transform: rotate(180deg); }
.etq-scan-locations {
margin: 6px 16px 10px;
padding: 8px;
background: #fff;
border: 1px solid #d7e1e9;
border-radius: 6px;
}
.etq-scan-locations-title {
padding: 3px 4px 8px;
color: #53657a;
font-size: 10px;
font-weight: 850;
letter-spacing: .06em;
text-transform: uppercase;
}
.etq-scan-location-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 9px 8px;
border-top: 1px solid #e6ecf1;
}
.etq-scan-location-row > span {
display: grid;
grid-template-columns: 18px minmax(0, 1fr);
min-width: 0;
color: #08775a;
}
.etq-scan-location-row small {
grid-column: 2;
color: #6b7c90;
font-size: 11px;
}
.etq-scan-location-row b {
color: #142033;
white-space: nowrap;
}
.etq-scan-location-empty {
padding: 14px 8px;
color: #66788d;
text-align: center;
font-size: 12px;
}
.etq-scan-location-empty.is-error { color: #b42318; }
@media (max-width: 768px) {
.etq-store-destination {
align-items: stretch;
gap: 8px;
padding: 9px 12px;
}
.etq-store-destination__identity { display: none; }
.etq-store-destination__control {
display: block;
width: 100%;
min-width: 0;
}
.etq-store-destination__control > span {
display: block;
margin-bottom: 4px;
color: #08775a;
font-size: 10px;
font-weight: 900;
letter-spacing: .05em;
text-transform: uppercase;
}
.etq-store-destination select { width: 100%; min-height: 44px; }
.etq-scan-destination {
top: 56px;
padding: 8px 12px;
}
.etq-scan-destination__icon { width: 34px; height: 34px; }
.etq-scan-destination select { min-height: 42px; font-size: 12px; }
.etq-page-shortcut {
position: fixed;
bottom: calc(18px + env(safe-area-inset-bottom));
left: 50%;
z-index: 1260;
min-height: 48px;
margin: 0;
padding: 9px 15px;
border-width: 2px;
border-radius: 24px;
box-shadow: 0 8px 24px rgba(6, 78, 59, .32);
transform: translateX(-50%);
}
.etq-page-shortcut > span {
display: inline;
}
.etq-page-shortcut--secondary {
right: auto;
bottom: calc(24px + env(safe-area-inset-bottom));
left: 12px;
min-height: 42px;
padding: 7px 11px;
border-radius: 21px;
transform: none;
}
.etq-page-shortcut--secondary > span {
display: none;
}
#etiquetasModal.etiquetas-page .etiquetas-grid,
#etiquetasModal.etiquetas-page .etiquetas-grid.view-list {
padding-bottom: calc(86px + env(safe-area-inset-bottom)) !important;
}
#etqImpressoModal.etiquetas-page {
min-height: 100dvh;
}
#etqImpressoModal.etiquetas-page .etiquetas-modal-header,
#etqImpressoModal.etiquetas-page .etiquetas-modal-search-row {
padding-left: 12px !important;
padding-right: 12px !important;
}
#etqImpressoModal.etiquetas-page .etiquetas-modal-search-row {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px;
}
#etqImpressoModal.etiquetas-page .etq-search-actions {
margin-left: 0;
}
#etqImpressoModal.etiquetas-page .etq-btn-refresh {
min-width: 42px;
padding: 8px 10px;
}
#etqImpressoModal.etiquetas-page .etq-btn-refresh span {
display: none;
}
#etqImpressoModal.etiquetas-page .etq-btn-scan {
position: fixed;
right: auto;
bottom: calc(22px + env(safe-area-inset-bottom));
left: 50%;
z-index: 1250;
width: 64px;
height: 64px;
min-height: 64px;
margin: 0;
padding: 0;
border: 3px solid #d1fae5;
border-radius: 50%;
box-shadow: 0 8px 24px rgba(6, 78, 59, .38), 0 0 0 5px rgba(52, 211, 153, .16);
transform: translateX(-50%);
font-size: 23px;
}
#etqImpressoModal.etiquetas-page .etq-btn-scan span {
display: none;
}
#etqImpressoModal.etiquetas-page .etiquetas-modal-header {
min-height: 58px;
padding-top: 9px !important;
padding-bottom: 9px !important;
}
#etqImpressoModal.etiquetas-page .etiquetas-modal-header h3 {
font-size: 17px !important;
}
#etqImpressoModal.etiquetas-page .etiquetas-modal-status {
min-height: 30px;
padding: 6px 12px !important;
font-size: 12px;
}
#etqImpressoModal.etiquetas-page .etiquetas-grid {
padding: 0 10px calc(104px + env(safe-area-inset-bottom)) !important;
overflow-x: hidden !important;
overflow-y: auto !important;
}
#etqImpressoModal.etiquetas-page .etq-table-head {
display: none !important;
}
#etqImpressoModal.etiquetas-page .etq-store-row {
grid-template-columns: 64px minmax(0, 1fr) !important;
grid-template-areas:
"photo product"
"photo qty"
"lot lot"
"meta meta"
"actions actions";
gap: 7px 10px;
width: 100%;
min-width: 0;
min-height: 0;
margin-top: 9px !important;
padding: 10px !important;
border-top: 1px solid #dbe3ec !important;
border-radius: 8px !important;
box-sizing: border-box;
}
#etqImpressoModal.etiquetas-page .etq-table-photo { grid-area: photo; align-self: start; }
#etqImpressoModal.etiquetas-page .etq-table-product { grid-area: product; }
#etqImpressoModal.etiquetas-page .etq-table-qty { grid-area: qty; flex-direction: row; align-items: baseline; }
#etqImpressoModal.etiquetas-page .etq-table-lote { grid-area: lot; flex-direction: row; align-items: center; padding: 6px 8px; }
#etqImpressoModal.etiquetas-page .etq-store-meta { grid-area: meta; padding: 2px 1px; }
#etqImpressoModal.etiquetas-page .etq-table-actions { grid-area: actions; width: 100%; padding-top: 8px; border-top: 1px solid #e4eaf0; }
#etqImpressoModal.etiquetas-page .etq-table-document { display: none !important; }
#etqImpressoModal.etiquetas-page .cp-product-thumb {
width: 62px;
height: 62px;
}
#etqImpressoModal.etiquetas-page .etq-table-product span {
display: -webkit-box;
white-space: normal;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
#etqImpressoModal.etiquetas-page .etq-table-actions {
display: grid !important;
grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
}
#etqImpressoModal.etiquetas-page .etq-btn-guardar,
#etqImpressoModal.etiquetas-page .etq-btn-retornar,
#etqImpressoModal.etiquetas-page .etq-btn-reimprimir {
width: 100%;
min-height: 44px;
font-size: 13px;
}
.etq-scan-confirm {
grid-template-columns: 36px minmax(0, 1fr);
margin: 0 12px 10px;
padding: 10px;
}
.etq-scan-confirm-icon {
width: 36px;
height: 36px;
font-size: 17px;
}
.etq-scan-confirm button {
grid-column: 1 / -1;
width: 100%;
min-height: 44px;
}
#etqArmazenarModal.etq-scan-modal,
#listaProdutosQrModal.etq-scan-modal {
align-items: flex-end !important;
padding: 0 !important;
}
#etqArmazenarModal .etq-scan-box,
#listaProdutosQrModal .etq-scan-box {
width: 100% !important;
max-width: none !important;
max-height: 96dvh;
border-right: 0 !important;
border-bottom: 0 !important;
border-left: 0 !important;
border-radius: 14px 14px 0 0 !important;
}
#etqArmazenarModal .etq-scan-camera,
#listaProdutosQrModal .etq-scan-camera {
aspect-ratio: 16 / 9 !important;
max-height: 34dvh;
}
.etq-scan-locations-trigger {
width: calc(100% - 24px);
min-height: 44px;
margin-right: 12px;
margin-left: 12px;
}
.etq-scan-locations {
max-height: 180px;
margin-right: 12px;
margin-left: 12px;
overflow-y: auto;
}
}
#minhasComprasWrapper #comprasListaToolbar.compras-workspace-toolbar {
min-height: 56px !important;
height: 56px !important;
padding-top: 4px !important;
padding-bottom: 4px !important;
}
#minhasComprasWrapper .compras-board-overview {
min-height: 42px !important;
height: 42px !important;
margin-bottom: 6px !important;
padding: 4px 0 6px !important;
}
#minhasComprasWrapper[data-board-view="todos"] #kanbanMinhasSolicitacoes .kanban-column-minhas {
display: flex !important;
flex-direction: column !important;
flex: 0 0 248px !important;
min-width: 248px !important;
height: 100% !important;
max-height: 100% !important;
align-self: stretch !important;
overflow: hidden !important;
}
#minhasComprasWrapper[data-board-view="todos"] #kanbanMinhasSolicitacoes .kanban-column-minhas.is-hidden-by-config {
display: none !important;
}
#minhasComprasWrapper .compras-kanban-settings-btn {
width: 30px;
height: 30px;
flex: 0 0 30px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
color: #ffffff;
background: #2563eb;
border: 1px solid #60a5fa;
border-radius: 6px;
box-shadow: 0 0 0 2px rgba(96, 165, 250, .14);
cursor: pointer;
transition: color .16s ease, background .16s ease, border-color .16s ease;
}
#minhasComprasWrapper .compras-kanban-settings-btn:hover,
#minhasComprasWrapper .compras-kanban-settings-btn:focus-visible {
color: #ffffff;
background: #1d4ed8;
border-color: #93c5fd;
outline: none;
}
#minhasComprasWrapper .compras-global-search {
width: min(520px, 100%);
}
#minhasComprasWrapper #kanbanFiltroGlobal {
color: #f8fafc !important;
background: rgba(255, 255, 255, .10) !important;
border: 1px solid #64748b !important;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
}
#minhasComprasWrapper #kanbanFiltroGlobal::placeholder {
color: #cbd5e1 !important;
opacity: 1;
}
#minhasComprasWrapper #kanbanFiltroGlobal:focus {
background: rgba(255, 255, 255, .14) !important;
border-color: #60a5fa !important;
box-shadow: 0 0 0 2px rgba(96, 165, 250, .22);
}
#minhasComprasWrapper .compras-global-search > i {
color: #e2e8f0 !important;
}
#minhasComprasWrapper .compras-keepers-toggle {
height: 30px;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
padding: 0 9px;
color: #e2e8f0;
background: rgba(255, 255, 255, .08);
border: 1px solid #64748b;
border-radius: 6px;
font-size: 10px;
font-weight: 700;
white-space: nowrap;
cursor: pointer;
}
#minhasComprasWrapper .compras-keepers-toggle:hover,
#minhasComprasWrapper .compras-keepers-toggle:focus-visible {
color: #ffffff;
border-color: #fbbf24;
outline: none;
}
#minhasComprasWrapper .compras-keepers-toggle.is-active {
color: #422006;
background: #fbbf24;
border-color: #fcd34d;
}
/* O painel tem uma única visão: resumo e ações compartilham a barra do módulo. */
#minhasComprasWrapper .compras-board-metrics--toolbar {
display: flex;
align-items: center;
gap: 5px;
margin-right: 2px;
}
#minhasComprasWrapper .compras-board-metrics--toolbar > span,
:root:not(.light-mode) #minhasComprasWrapper .compras-board-metrics--toolbar > span {
min-height: 30px;
padding: 5px 8px;
background: rgba(255, 255, 255, .06) !important;
border: 1px solid rgba(148, 163, 184, .24) !important;
border-radius: 5px;
color: #cbd5e1 !important;
font-size: 9px;
line-height: 1;
}
#minhasComprasWrapper .compras-board-metrics--toolbar strong,
:root:not(.light-mode) #minhasComprasWrapper .compras-board-metrics--toolbar strong {
margin-right: 3px;
color: #ffffff !important;
font-size: 12px;
}
@media (max-width: 1180px) {
#minhasComprasWrapper .compras-board-metrics--toolbar {
display: none;
}
}
/* Versão minimalista: mais etapas visíveis e cards com leitura vertical. */
#minhasComprasWrapper #comprasListaToolbar.compras-workspace-toolbar {
min-height: 44px !important;
height: 44px !important;
gap: 10px !important;
padding: 3px 0 !important;
}
#minhasComprasWrapper .compras-toolbar-main {
gap: 8px !important;
flex-wrap: nowrap;
}
#minhasComprasWrapper .compras-workspace-title {
min-width: 0;
}
#minhasComprasWrapper .compras-workspace-title strong {
font-size: 16px;
}
#minhasComprasWrapper .compras-workspace-title small {
font-size: 10px;
white-space: nowrap;
}
#minhasComprasWrapper .compras-title-icon {
width: 26px;
height: 26px;
font-size: 12px;
border-radius: 6px;
}
#minhasComprasWrapper .compras-global-search {
width: auto !important;
max-width: none !important;
flex: 1 1 auto;
min-width: 0;
}
#minhasComprasWrapper #kanbanFiltroGlobal {
flex: 0 1 320px !important;
width: 320px;
min-width: 220px;
height: 32px;
padding: 0 32px !important;
font-size: 11px !important;
border-radius: 6px !important;
}
@media (max-width: 900px) {
#minhasComprasWrapper #kanbanFiltroGlobal {
flex-basis: 220px !important;
width: 220px;
min-width: 160px;
}
}
#minhasComprasWrapper .compras-global-search > i {
left: 11px;
font-size: 12px;
}
#minhasComprasWrapper .compras-toolbar-actions {
gap: 5px !important;
flex-wrap: nowrap;
}
#minhasComprasWrapper .compras-toolbar-actions > .content-button {
width: 32px !important;
height: 32px !important;
min-width: 32px;
border-radius: 7px !important;
}
#minhasComprasWrapper .compras-toolbar-actions > .content-button i {
font-size: 14px !important;
}
#minhasComprasWrapper #comprasToggleSolicitanteBtn {
min-width: 78px;
padding: 0 9px !important;
font-size: 11px;
}
#minhasComprasWrapper .compras-board-metrics--toolbar > span,
:root:not(.light-mode) #minhasComprasWrapper .compras-board-metrics--toolbar > span {
min-height: 26px;
padding: 4px 6px;
font-size: 8px;
}
#minhasComprasWrapper .compras-board-metrics--toolbar strong,
:root:not(.light-mode) #minhasComprasWrapper .compras-board-metrics--toolbar strong {
font-size: 11px;
}
#minhasComprasWrapper[data-board-view="todos"] #kanbanMinhasSolicitacoes .kanban-column-minhas {
flex-basis: 218px !important;
min-width: 218px !important;
padding: 8px !important;
}
#minhasComprasWrapper #kanbanMinhasSolicitacoes .kanban-column-minhas > div:first-child {
min-height: 42px !important;
padding: 7px 7px 6px !important;
}
#minhasComprasWrapper #kanbanMinhasSolicitacoes .kanban-cards-minhas {
padding: 7px 6px 10px !important;
gap: 5px !important;
}
#minhasComprasWrapper #kanbanMinhasSolicitacoes .kanban-card {
grid-template-columns: minmax(0, 1fr) !important;
row-gap: 2px;
min-height: 74px !important;
padding: 6px 7px !important;
}
#minhasComprasWrapper #kanbanMinhasSolicitacoes .cp-card-number,
#minhasComprasWrapper #kanbanMinhasSolicitacoes .cp-card-supplier {
grid-column: 1 / -1;
margin: 0 !important;
min-width: 0;
}
#minhasComprasWrapper #kanbanMinhasSolicitacoes .cp-card-number {
font-size: 10px !important;
white-space: nowrap;
}
#minhasComprasWrapper #kanbanMinhasSolicitacoes .cp-card-number > span {
display: flex !important;
flex-wrap: nowrap;
gap: 4px !important;
white-space: nowrap;
}
#minhasComprasWrapper #kanbanMinhasSolicitacoes .cp-card-supplier {
padding-right: 20px !important;
font-size: 10px !important;
}
#minhasComprasWrapper #kanbanMinhasSolicitacoes .cp-card-dates {
flex-direction: column !important;
align-items: flex-start;
flex-wrap: nowrap !important;
gap: 2px !important;
margin: 1px 0 !important;
padding: 3px 4px !important;
font-size: 9px !important;
overflow: hidden;
white-space: nowrap;
}
#minhasComprasWrapper #kanbanMinhasSolicitacoes .cp-card-dates > span {
width: 100%;
min-width: 0;
gap: 3px !important;
}
#minhasComprasWrapper #kanbanMinhasSolicitacoes .cp-card-date-label {
color: #475569;
font-weight: 700;
}
#minhasComprasWrapper #kanbanMinhasSolicitacoes .cp-card-summary {
min-height: 17px !important;
font-size: 10px !important;
overflow: hidden;
white-space: nowrap;
}
#minhasComprasWrapper #kanbanMinhasSolicitacoes .kanban-column-minhas > div:first-child {
min-height: 36px !important;
margin-bottom: 2px !important;
padding: 7px 8px 6px !important;
}
#minhasComprasWrapper #kanbanMinhasSolicitacoes .cp-column-total {
min-height: 14px !important;
margin-bottom: 2px !important;
line-height: 1 !important;
}
#minhasComprasWrapper #kanbanMinhasSolicitacoes .kanban-column-minhas > div:nth-child(3):not([class]) {
height: 3px !important;
min-height: 3px !important;
margin: 0 0 3px !important;
padding: 0 !important;
}
#minhasComprasWrapper #kanbanMinhasSolicitacoes .kanban-cards-minhas {
flex: 1 1 auto !important;
min-height: 0 !important;
max-height: none !important;
padding: 7px 8px 10px !important;
gap: 4px !important;
overflow-y: auto !important;
}
#minhasComprasWrapper #kanbanMinhasSolicitacoes .kanban-card {
display: grid !important;
grid-template-columns: auto minmax(0, 1fr);
column-gap: 6px;
min-height: 0 !important;
padding: 4px 7px !important;
}
#minhasComprasWrapper #kanbanMinhasSolicitacoes .cp-card-context {
top: 3px;
right: 3px;
}
#minhasComprasWrapper #kanbanMinhasSolicitacoes .cp-card-menu-trigger {
width: 20px;
height: 20px;
}
#minhasComprasWrapper #kanbanMinhasSolicitacoes .cp-card-number {
grid-column: 1;
margin-bottom: 2px !important;
padding: 0 22px 0 0 !important;
font-size: 10px !important;
line-height: 1.15 !important;
}
#minhasComprasWrapper #kanbanMinhasSolicitacoes .cp-card-supplier {
grid-column: 2;
margin: 0 0 2px !important;
padding: 0 !important;
font-size: 11px !important;
line-height: 1.2 !important;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#minhasComprasWrapper #kanbanMinhasSolicitacoes .cp-card-dates {
grid-column: 1 / -1;
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
gap: 1px 6px !important;
margin: 0 0 1px !important;
padding: 1px 0 !important;
font-size: 9px !important;
line-height: 1.15 !important;
}
#minhasComprasWrapper #kanbanMinhasSolicitacoes .cp-card-requester {
grid-column: 1 / -1;
margin: 0 0 1px !important;
padding: 0 !important;
font-size: 9px !important;
line-height: 1.15 !important;
}
#minhasComprasWrapper #kanbanMinhasSolicitacoes .cp-card-summary {
grid-column: 1 / -1;
min-height: 18px !important;
margin: 0 !important;
padding: 1px 0 0 !important;
font-size: 11px !important;
line-height: 1.15 !important;
}
#minhasComprasWrapper #kanbanMinhasSolicitacoes .kanban-card:has(.cp-card-requester) .cp-card-dates {
grid-column: 1;
min-width: 0;
flex-wrap: nowrap !important;
}
#minhasComprasWrapper #kanbanMinhasSolicitacoes .kanban-card:has(.cp-card-requester) .cp-card-requester {
grid-column: 2;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#minhasComprasWrapper #kanbanMinhasSolicitacoes .cp-card-expanded {
grid-column: 1 / -1;
}
#minhasComprasWrapper #kanbanMinhasSolicitacoes .cp-card-state {
min-height: 16px;
padding: 2px 5px;
font-size: 8px !important;
}
#minhasComprasWrapper #kanbanMinhasSolicitacoes .kanban-card button[aria-label="Expandir"] {
width: 22px;
height: 22px;
padding: 0 !important;
}
/* Deve vir após as regras legadas do card para preservar a grade de uma coluna. */
#minhasComprasWrapper #kanbanMinhasSolicitacoes .kanban-card {
grid-template-columns: minmax(0, 1fr) !important;
row-gap: 2px !important;
min-height: 74px !important;
padding: 6px 7px !important;
}
#minhasComprasWrapper #kanbanMinhasSolicitacoes .cp-card-number,
#minhasComprasWrapper #kanbanMinhasSolicitacoes .cp-card-supplier,
#minhasComprasWrapper #kanbanMinhasSolicitacoes .cp-card-dates,
#minhasComprasWrapper #kanbanMinhasSolicitacoes .cp-card-requester,
#minhasComprasWrapper #kanbanMinhasSolicitacoes .cp-card-summary {
grid-column: 1 / -1 !important;
min-width: 0;
}
#minhasComprasWrapper #kanbanMinhasSolicitacoes .cp-card-number > span,
#minhasComprasWrapper #kanbanMinhasSolicitacoes .cp-card-dates,
#minhasComprasWrapper #kanbanMinhasSolicitacoes .cp-card-summary {
flex-wrap: nowrap !important;
white-space: nowrap;
}
#minhasComprasWrapper #kanbanMinhasSolicitacoes .cp-card-dates {
flex-direction: column !important;
align-items: flex-start !important;
gap: 2px !important;
}
#minhasComprasWrapper #comprasListaToolbar.compras-workspace-toolbar {
align-items: center !important;
min-height: 38px !important;
height: 38px !important;
padding: 2px 0 !important;
box-sizing: border-box;
overflow: visible;
}
#minhasComprasWrapper .compras-toolbar-main,
#minhasComprasWrapper .compras-toolbar-actions {
align-items: center !important;
align-self: center;
min-height: 0;
height: 32px;
}
#minhasComprasWrapper .compras-workspace-title strong {
font-size: 15px;
}
#minhasComprasWrapper .compras-title-icon {
width: 22px;
height: 22px;
font-size: 10px;
}
#minhasComprasWrapper #kanbanFiltroGlobal {
height: 28px;
}
#minhasComprasWrapper .compras-toolbar-actions > .content-button {
width: 28px !important;
height: 28px !important;
min-width: 28px;
margin: 0 !important;
border-radius: 6px !important;
}
#minhasComprasWrapper .compras-toolbar-actions > .content-button i {
font-size: 12px !important;
}
#minhasComprasWrapper #comprasToggleSolicitanteBtn {
min-width: 70px;
padding: 0 7px !important;
font-size: 10px;
}
#minhasComprasWrapper .compras-board-metrics--toolbar > span,
:root:not(.light-mode) #minhasComprasWrapper .compras-board-metrics--toolbar > span {
min-height: 24px;
padding: 3px 5px;
}
#minhasComprasWrapper #kanbanMinhasSolicitacoes .cp-column-tools {
min-height: 22px;
margin: 0 0 3px;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 5px;
}
#minhasComprasWrapper #kanbanMinhasSolicitacoes .cp-column-tools.has-sort {
justify-content: space-between;
}
#minhasComprasWrapper #kanbanMinhasSolicitacoes .cp-column-tools .cp-column-total {
min-height: 0 !important;
margin: 0 !important;
}
#minhasComprasWrapper #comprasOrdenarPrevisaoBtn.cp-sort-by-deadline {
height: 22px;
margin: 0;
padding: 0 7px;
display: inline-flex;
align-items: center;
gap: 4px;
color: #8a4d16;
background: #fff7df;
border: 1px solid #f4c96b;
border-radius: 5px;
font-size: 8px;
font-weight: 700;
white-space: nowrap;
cursor: pointer;
}
#minhasComprasWrapper #comprasOrdenarPrevisaoBtn.cp-sort-by-deadline:hover,
#minhasComprasWrapper #comprasOrdenarPrevisaoBtn.cp-sort-by-deadline.is-active {
color: #ffffff;
background: #d97706;
border-color: #d97706;
}
#minhasComprasWrapper #kanbanMinhasSolicitacoes .cp-cfop-filter {
position: relative;
min-width: 0;
}
#minhasComprasWrapper #kanbanMinhasSolicitacoes .cp-cfop-filter-btn {
height: 22px;
margin: 0;
padding: 0 7px;
display: inline-flex;
align-items: center;
gap: 4px;
color: #7c4a11;
background: #fff7df;
border: 1px solid #f4c96b;
border-radius: 5px;
font-size: 8px;
font-weight: 700;
white-space: nowrap;
cursor: pointer;
}
#minhasComprasWrapper #kanbanMinhasSolicitacoes .cp-cfop-filter-btn.is-active {
color: #ffffff;
background: #b45309;
border-color: #b45309;
}
#minhasComprasWrapper #kanbanMinhasSolicitacoes .cp-cfop-menu {
position: absolute;
top: calc(100% + 4px);
left: 0;
z-index: 80;
width: 190px;
max-height: 260px;
padding: 7px;
overflow-y: auto;
color: #334155;
background: #ffffff;
border: 1px solid #d9e0e7;
border-radius: 7px;
box-shadow: 0 12px 28px rgba(15, 23, 42, .18);
}
#minhasComprasWrapper #kanbanMinhasSolicitacoes .cp-cfop-menu[hidden] {
display: none !important;
}
#minhasComprasWrapper #kanbanMinhasSolicitacoes .cp-cfop-menu-header {
margin-bottom: 5px;
padding-bottom: 5px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
border-bottom: 1px solid #e5e7eb;
font-size: 9px;
}
#minhasComprasWrapper #kanbanMinhasSolicitacoes .cp-cfop-menu-header button {
padding: 0;
color: #b45309;
background: transparent;
border: 0;
font-size: 8px;
font-weight: 700;
cursor: pointer;
}
#minhasComprasWrapper #kanbanMinhasSolicitacoes .cp-cfop-menu label {
padding: 4px 3px;
display: flex;
align-items: center;
gap: 6px;
border-radius: 4px;
font-size: 9px;
cursor: pointer;
}
#minhasComprasWrapper #kanbanMinhasSolicitacoes .cp-cfop-menu label:hover {
background: #fff7ed;
}
#minhasComprasWrapper #kanbanMinhasSolicitacoes .kanban-card.cp-card-overdue,
:root:not(.light-mode) #minhasComprasWrapper #kanbanMinhasSolicitacoes .kanban-card.cp-card-overdue {
background: #fff1f2 !important;
border-color: #f3a6aa !important;
box-shadow: inset 3px 0 0 #dc5a61, 0 1px 3px rgba(127, 29, 29, .08) !important;
}
#minhasComprasWrapper #kanbanMinhasSolicitacoes .kanban-card.cp-card-overdue .cp-card-dates {
background: #ffe4e6 !important;
}
#minhasComprasWrapper #kanbanMinhasSolicitacoes .cp-card-overdue-days {
display: inline-flex !important;
width: auto !important;
margin-top: 1px;
padding: 2px 5px;
align-items: center;
gap: 4px !important;
color: #a52f36 !important;
background: #fecdd3;
border-radius: 4px;
font-size: 8px;
font-weight: 700;
line-height: 1.1;
}
#modalDetalhesPedidoCompras.cp-detail-modal {
left: var(--cp-detail-nav-offset, 0px) !important;
right: 0 !important;
width: auto !important;
padding: 18px !important;
background: rgba(15, 23, 42, .68) !important;
}
#modalDetalhesPedidoCompras .cp-purchase-sheet {
width: min(1880px, 98vw) !important;
height: min(900px, 94vh) !important;
max-width: none !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
display: grid !important;
grid-template-rows: 58px minmax(0, 1fr);
background: #f8fafc !important;
color: #273142 !important;
border: 1px solid #d8dee8 !important;
border-radius: 8px !important;
box-shadow: 0 24px 70px rgba(2, 6, 23, .34) !important;
}
#modalDetalhesPedidoCompras .cp-detail-header {
min-height: 58px !important;
padding: 0 18px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
background: #fff !important;
border: 0 !important;
border-bottom: 1px solid #e2e8f0 !important;
}
#modalDetalhesPedidoCompras .cp-detail-header h3 {
margin: 0 !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
color: #a53c36 !important;
font-size: 18px !important;
font-weight: 650 !important;
}
#modalDetalhesPedidoCompras .cp-detail-header h3 > i { color: #d04f45 !important; font-size: 17px !important; }
#modalDetalhesPedidoCompras .cp-detail-header-actions { display: flex; align-items: center; gap: 6px; }
#modalDetalhesPedidoCompras .cp-detail-header .modal-close {
position: static !important;
width: 34px !important;
height: 34px !important;
padding: 0 !important;
display: grid !important;
place-items: center !important;
background: transparent !important;
color: #64748b !important;
border: 0 !important;
font-size: 24px !important;
}
#modalDetalhesPedidoCompras .cp-detail-body { position: relative !important; min-height: 0 !important; padding: 0 !important; overflow: hidden !important; background: #fff !important; color: #273142 !important; }
#modalDetalhesPedidoCompras .cp-sheet-loading { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; background: #f8fafc; color: #475569; text-align: center; }
#modalDetalhesPedidoCompras .cp-sheet-loading i { margin-bottom: 7px; color: #cf493f; font-size: 28px; }
#modalDetalhesPedidoCompras .cp-sheet-loading strong { color: #273142; font-size: 14px; font-weight: 650; }
#modalDetalhesPedidoCompras .cp-sheet-loading span { color: #667085; font-size: 12px; }
.cp-sheet-layout { height: 100%; min-height: 100%; display: grid; grid-template-columns:minmax(0,1fr) 250px; background: #fff; }
.cp-sheet-main { min-width: 0; min-height: 0; height: 100%; padding: 14px 18px 12px; display: flex; flex-direction: column; overflow: hidden; }
.cp-sheet-summary { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: start; max-width: 1080px; }
.cp-sheet-avatar { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 6px; background: #f1b44c; color: #fff; font-size: 18px; }
.cp-sheet-fields { display: grid; grid-template-columns: minmax(220px, 2fr) repeat(4, minmax(130px, 1fr)); gap: 8px 14px; }
.cp-sheet-field, .cp-sheet-status-inline { min-width: 0; padding-bottom: 5px; border-bottom: 1px solid #cbd5e1; }
.cp-sheet-field--wide { grid-column: span 2; }
.cp-sheet-field span, .cp-sheet-totals span, .cp-sheet-note span, .cp-sheet-links > span, .cp-sheet-status-inline span { display: block; margin-bottom: 4px; color: #667085 !important; font-size: 11px; font-weight: 500; }
.cp-sheet-field strong { display: block; overflow: hidden; color: #273142; font-size: 13px; font-weight: 550; text-overflow: ellipsis; white-space: nowrap; }
.cp-sheet-status-inline strong { display: inline-flex; max-width: 100%; padding: 3px 8px; background: #fff3d6; color: #8a4d16; border-radius: 999px; font-size: 11px; }
.cp-sheet-totals { width: min(920px, 100%); margin: 8px 0 8px 64px; padding: 7px 10px; display: grid; grid-template-columns: repeat(5, minmax(110px, 1fr)); background: #fff8d8; border-radius: 6px; }
.cp-sheet-totals > div { min-width: 0; padding: 0 8px; text-align: center; border-right: 1px solid rgba(148, 116, 24, .15); }
.cp-sheet-totals > div:last-child { border-right: 0; }
.cp-sheet-totals strong { color: #374151; font-size: 12px; font-weight: 650; }
.cp-sheet-items { width: min(1180px, 100%); min-height: 0; margin-top: 4px; flex: 1 1 auto; display: flex; flex-direction: column; border: 1px solid #d5dbe5; border-radius: 5px; overflow: hidden; }
.cp-sheet-section-title { margin: 0 !important; padding: 10px 12px !important; color: #273142 !important; background: #fff !important; border: 0 !important; border-bottom: 1px solid #d8dee8 !important; font-size: 12px !important; }
.cp-sheet-table-wrap { flex: 1 1 auto; min-height: 0; overflow: auto; }
.cp-sheet-items table { width: 100% !important; border-collapse: collapse !important; font-size: 12px !important; }
.cp-sheet-items th { height: 34px !important; padding: 7px 10px !important; text-align: left !important; color: #52606d !important; background: #f4f6f8 !important; border: 0 !important; border-right: 1px solid #d8dee8 !important; border-bottom: 1px solid #d8dee8 !important; font-size: 11px !important; font-weight: 600 !important; }
.cp-sheet-items td { height: 34px !important; padding: 7px 10px !important; color: #26323d !important; background: #fff !important; border: 0 !important; border-right: 1px solid #e1e6ed !important; border-bottom: 1px solid #e1e6ed !important; font-size: 12px !important; }
.cp-sheet-items tbody tr:first-child td { background: #fff0ee !important; }
.cp-sheet-item-index { width: 54px; text-align: center; }
.cp-sheet-product { min-width: 360px; }
.cp-sheet-quantity { width: 130px; text-align: center; }
.cp-sheet-money { width: 140px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cp-sheet-money--total { font-weight: 650; }
.cp-sheet-empty { padding: 40px !important; text-align: center; color: #94a3b8 !important; }
.cp-sheet-record-count { margin-top: auto; padding: 10px; color: #667085; font-size: 11px; }
.cp-sheet-note, .cp-sheet-links { width: min(760px, 100%); margin-top: 8px; padding: 7px 10px; display: flex; align-items: flex-start; gap: 10px; background: #fff8d8; color: #5e4a13; border-radius: 5px; }
.cp-sheet-note strong, .cp-sheet-links div { color: #4b5563; font-size: 12px; font-weight: 550; }
.cp-sheet-actions { min-width:0; padding:14px 10px; overflow-y:auto; background:#f4fbfc; border-left:1px solid #d7e2e6; }
.cp-sheet-actions-title { margin:0 6px 10px; padding-bottom:9px; border-bottom:1px solid #d7e2e6; }
.cp-sheet-actions-title span { display:block; color:#334155; font-size:12px; font-weight:700; }
.cp-sheet-actions-title small { color:#64748b; font-size:10px; }
.cp-sheet-action { width:100%; min-height:38px; padding:7px 8px; display:grid; grid-template-columns:18px minmax(0,1fr) auto; align-items:center; gap:7px; color:#a53c36; background:transparent; border:0; border-radius:5px; text-align:left; text-decoration:none; }
.cp-sheet-action i { text-align:center; }
.cp-sheet-action > span { font-size:12px; font-weight:550; }
.cp-sheet-action small { padding:2px 5px; border-radius:999px; font-size:9px; white-space:nowrap; }
.cp-sheet-action.is-ready:hover { background:#fff; }
.cp-sheet-action.is-ready small { color:#067647; background:#dcfae6; }
.cp-sheet-action.is-planned { color:#7c8798; cursor:not-allowed; opacity:1; }
.cp-sheet-action.is-planned small { color:#8a4d16; background:#fff3d6; }
.cp-detail-modal--nfe { left:var(--cp-detail-nav-offset, 0px) !important; right:0 !important; width:auto !important; padding:18px !important; }
.cp-detail-modal--nfe .cp-nfe-sheet { width:min(1880px,98vw) !important; height:min(900px,94vh) !important; max-width:none !important; max-height:none !important; display:grid !important; grid-template-rows:58px minmax(0,1fr); overflow:hidden !important; border-radius:8px !important; background:#fff !important; }
.cp-detail-modal--nfe .cp-detail-header { min-height:58px; padding:0 18px; display:flex; align-items:center; justify-content:space-between; background:#fff; border-bottom:1px solid #e2e8f0; }
.cp-detail-modal--nfe .cp-detail-header > strong { display:flex; align-items:center; gap:8px; color:#a53c36; font-size:18px; }
.cp-detail-modal--nfe .cp-detail-header > strong i { color:#d04f45; font-size:17px; }
.cp-detail-modal--nfe .cp-detail-header-actions { display:flex; align-items:center; gap:7px; }
.cp-detail-modal--nfe .modal-close { position:static !important; width:34px; height:34px; padding:0; display:grid; place-items:center; color:#64748b; background:transparent; border:0; font-size:18px; }
.cp-detail-next { min-height:34px; padding:0 11px; display:inline-flex; align-items:center; gap:6px; color:#334155; background:#fff; border:1px solid #cbd5e1; border-radius:5px; font-size:12px; }
.cp-nfe-layout { min-height:0; display:grid; grid-template-columns:minmax(0,1fr) 250px; }
.cp-nfe-main { min-width:0; min-height:0; padding:12px 14px; display:flex; flex-direction:column; overflow:hidden; }
.cp-nfe-info { display:block !important; }
.cp-nfe-summary { max-width:none; }
.cp-nfe-totals { width:min(900px,100%); grid-template-columns:1.15fr .55fr .9fr 1.4fr; }
.cp-nfe-purchase-control { display:grid; grid-template-columns:auto 110px; align-items:center; gap:3px 8px; text-align:left !important; }
.cp-nfe-purchase-control label { color:#667085; font-size:11px; }
.cp-nfe-purchase-control select { min-height:28px; padding:3px 7px; color:#273142; background:#fff; border:1px solid #cbd5e1; border-radius:4px; font-size:11px; }
.cp-nfe-purchase-control small { grid-column:1/-1; min-height:12px; font-size:9px; }
.cp-sheet-field--planned strong, .cp-nfe-document-meta .is-planned strong { display:inline-flex; width:max-content; padding:2px 6px; color:#8a4d16; background:#fff3d6; border-radius:999px; font-size:10px; }
.cp-sheet-field--planned small, .cp-nfe-document-meta small { display:block; margin-top:3px; color:#667085; font-size:9px; }
.cp-nfe-document-meta { margin:6px 0 0 64px; display:grid; grid-template-columns:2fr 1fr 1.3fr 1fr 1fr; gap:4px 12px; }
.cp-nfe-document-meta > div { min-width:0; min-height:42px; max-height:46px; padding-bottom:4px; overflow:hidden; border-bottom:1px solid #d8dee8; }
.cp-nfe-document-meta span { display:block; margin-bottom:3px; color:#667085; font-size:10px; }
.cp-nfe-document-meta strong, .cp-nfe-document-meta a { display:block; overflow:hidden; color:#273142 !important; font-size:11px !important; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.cp-nfe-key-value { width:100%; min-width:0; max-width:100%; display:flex; align-items:flex-start; gap:6px; overflow:hidden; }
.cp-nfe-key-value .cp-nfe-key-link { min-width:0; max-width:100%; display:-webkit-box; color:#0f172a !important; font-weight:700; line-height:1.2; text-decoration:underline; overflow:hidden; overflow-wrap:anywhere; word-break:break-word; white-space:normal; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.cp-nfe-key-value > a:last-child { flex:0 0 22px; }
.cp-nfe-key-value--plain { color:#0f172a; font-size:11px; font-weight:700; line-height:1.25; overflow-wrap:anywhere; word-break:break-word; white-space:normal; }
.cp-nfe-document-meta > div:not(:first-child) strong { white-space:normal; overflow-wrap:anywhere; }
.cp-nfe-meta-natureza strong { display:-webkit-box; line-height:1.2; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.cp-nfe-document-meta .is-planned small { display:none; }
.cp-nfe-note { width:min(900px,100%); margin:7px 0 0 64px; }
.cp-order-tabs { width:min(1180px,100%); margin-top:2px; }
.cp-nfe-tabs { margin-top:6px; display:flex; overflow-x:auto; border-bottom:1px solid #cbd5e1; }
.cp-nfe-tabs button { min-height:38px; padding:6px 10px; display:flex; align-items:center; gap:5px; color:#667085; background:transparent; border:0; border-bottom:2px solid transparent; font-size:11px; white-space:nowrap; }
.cp-nfe-tabs button.is-active { color:#a53c36; border-bottom-color:#d04f45; font-weight:700; }
.cp-nfe-tabs button:disabled { opacity:1; cursor:not-allowed; }
.cp-nfe-tabs small { padding:2px 4px; color:#8a4d16; background:#fff3d6; border-radius:999px; font-size:8px; }
.cp-nfe-cfop { margin-top:5px; }
.cp-nfe-cfop > div { padding:5px 8px !important; border-radius:5px !important; }
.cp-nfe-cfop > div > div:first-child { margin-bottom:4px !important; }
.cp-nfe-cfop > div > div:nth-child(2) { gap:6px !important; }
.cp-nfe-cfop > div > div:nth-child(2) > div { padding:5px 7px !important; }
.cp-nfe-cfop > div > div:nth-child(2) > div > div:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cp-nfe-items-section { min-height:0; margin-top:5px; flex:1 1 auto; display:flex; flex-direction:column; overflow:hidden; }
.cp-nfe-import-guidance { padding:5px 9px; display:flex; align-items:center; justify-content:space-between; gap:12px; background:#fff8d8; color:#5e4a13; font-size:11px; }
.cp-nfe-import-guidance span { color:#667085; }
#modalNfePedidosItens { min-height:0; flex:1 1 auto; }
#modalNfePedidosItens > div { height:100%; max-height:none !important; border-radius:0 0 5px 5px !important; }
.cp-nfe-table-wrap { background:#fff; }
.cp-nfe-items-table thead tr { background:#f4f6f8 !important; }
.cp-nfe-items-table th { height:34px; padding:7px 9px !important; color:#52606d !important; background:#f4f6f8 !important; border-right:1px solid #d8dee8; font-size:11px !important; font-weight:600; white-space:nowrap; }
.cp-nfe-items-table td { height:34px; padding:7px 9px !important; color:#26323d !important; background:#fff; border-right:1px solid #e1e6ed; border-bottom:1px solid #e1e6ed; font-size:12px !important; }
.cp-nfe-items-table tbody tr:first-child td { background:#fff0ee; }
.cp-nfe-planned-cell { min-width:120px; padding:7px 8px; color:#64748b; }
.cp-nfe-planned-cell span { display:inline-block; padding:2px 5px; color:#8a4d16; background:#fff3d6; border-radius:999px; font-size:9px; }
.cp-nfe-planned-cell small { display:block; margin-top:3px; font-size:9px; }
@media (max-width: 1500px) {
.cp-nfe-summary .cp-sheet-fields { grid-template-columns:minmax(220px,2fr) repeat(2,minmax(130px,1fr)); }
.cp-nfe-document-meta { grid-template-columns:minmax(240px,1.5fr) repeat(2,minmax(150px,1fr)); }
}
/* A ficha operacional é sempre clara, inclusive quando o shell está em modo escuro. */
:root:not(.light-mode) #modalDetalhesPedidoCompras .cp-sheet-field span,
:root:not(.light-mode) #modalDetalhesPedidoCompras .cp-sheet-totals span,
:root:not(.light-mode) #modalDetalhesPedidoCompras .cp-sheet-note span,
:root:not(.light-mode) #modalDetalhesPedidoCompras .cp-sheet-status-inline span,
:root:not(.light-mode) #modalNfePedidos .cp-sheet-field span,
:root:not(.light-mode) #modalNfePedidos .cp-sheet-totals span,
:root:not(.light-mode) #modalNfePedidos .cp-sheet-note span,
:root:not(.light-mode) #modalNfePedidos .cp-nfe-document-meta span { color:#667085 !important; }
:root:not(.light-mode) #modalDetalhesPedidoCompras .cp-sheet-actions-title span,
:root:not(.light-mode) #modalNfePedidos .cp-sheet-actions-title span { color:#334155 !important; }
:root:not(.light-mode) #modalDetalhesPedidoCompras .cp-sheet-actions-title small,
:root:not(.light-mode) #modalNfePedidos .cp-sheet-actions-title small { color:#64748b !important; }
@media (max-width: 900px) {
#modalDetalhesPedidoCompras.cp-detail-modal { left: 0 !important; padding: 0 !important; }
#modalDetalhesPedidoCompras .cp-detail-body { overflow: auto !important; }
#modalDetalhesPedidoCompras .cp-purchase-sheet { width: 100vw !important; height: 100dvh !important; border: 0 !important; border-radius: 0 !important; }
.cp-sheet-main { height: auto; min-height: 100%; padding: 16px 12px; overflow: visible; }
.cp-sheet-layout, .cp-nfe-layout { grid-template-columns:1fr; }
.cp-sheet-actions { border-top:1px solid #d7e2e6; border-left:0; }
.cp-sheet-summary { grid-template-columns: 48px minmax(0, 1fr); gap: 10px; }
.cp-sheet-fields { grid-template-columns: 1fr 1fr; gap: 12px; }
.cp-sheet-field--wide { grid-column: 1 / -1; }
.cp-sheet-totals { margin: 16px 0 10px; grid-template-columns: 1fr 1fr; gap: 10px; }
.cp-sheet-totals > div { padding: 5px; border-right: 0; text-align: left; }
.cp-sheet-items { min-height: 240px; }
.cp-detail-modal--nfe { left:0 !important; padding:0 !important; }
.cp-detail-modal--nfe .cp-nfe-sheet { width:100vw !important; height:100dvh !important; border-radius:0 !important; }
.cp-nfe-main { overflow:auto; }
.cp-nfe-totals { grid-template-columns:1fr 1fr; }
.cp-nfe-document-meta { margin:10px 0 0; grid-template-columns:1fr 1fr; }
.cp-nfe-note { margin-left:0; }
}
/* ========================================================================
Shell operacional compacto — piloto: Lista de produtos
Mantém a estrutura, IDs, rotas e eventos legados; altera somente a moldura.
======================================================================== */
:root {
--shell-topbar-height: 58px;
--shell-sidebar-width: 60px;
--shell-gutter: 16px;
--shell-divider: color-mix(in srgb, var(--border-color) 82%, transparent);
}
/* A janela deixa de simular um card: o conteúdo passa a usar o viewport útil. */
.app {
border: 0;
border-radius: 0;
background: var(--theme-bg-color);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.light-mode .app { box-shadow: none; }
/* Barra global: 56 px, com ações preservadas e menos espaço desperdiçado. */
.header {
height: var(--shell-topbar-height);
padding: 0 12px;
gap: 8px;
background: var(--theme-bg-color);
}
.menu-logo {
max-width: 122px;
max-height: 32px;
object-fit: contain;
}
.header-menu a {
min-height: 44px;
display: inline-flex;
align-items: center;
padding: 0 12px;
}
.header-profile {
gap: 10px;
padding-left: 12px;
flex-basis: auto;
}
.profile-img { margin-left: 0; }
/* Navegação lateral compacta: a largura permanece estável e o menu abre como painel. */
.left-side {
box-sizing: border-box;
flex-basis: var(--shell-sidebar-width);
width: var(--shell-sidebar-width);
padding: 8px;
background: var(--theme-bg-color);
}
.sidebar-hamburger {
width: 44px;
height: 44px;
border-radius: 8px;
box-shadow: none;
}
.sidebar-content {
left: calc(var(--shell-sidebar-width) + 8px);
top: 8px;
bottom: 8px;
width: min(288px, calc(100vw - var(--shell-sidebar-width) - 24px));
padding: 12px;
border: 1px solid var(--shell-divider);
border-radius: 8px;
box-shadow: 0 16px 36px rgba(15, 23, 42, .22);
}
.side-wrapper + .side-wrapper { margin-top: 14px; }
.side-title { margin: 4px 6px 8px; font-size: 12px; }
.side-menu a { min-height: 40px; padding: 8px; }
.side-submenu .menu-link { padding-left: 18px; }
/* O piloto remove a moldura externa sem tocar nos componentes internos da lista. */
#listaProdutos > .content-wrapper {
box-sizing: border-box;
padding: 12px var(--shell-gutter) 16px;
background: transparent;
overflow: auto;
scrollbar-gutter: stable;
}
#listaProdutos .content-section.lista-produtos-alta {
width: 100%;
max-width: none;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
#listaProdutos .lp-tabs-nav {
min-height: 40px;
margin: 0 0 8px;
padding: 0;
border-bottom: 1px solid var(--shell-divider);
background: transparent;
}
#listaProdutos .filter-bar {
min-height: 44px;
margin: 0 0 8px;
padding: 0;
background: transparent;
}
/* Elementos fixos: atalhos migraram para o header. */
.floating-shortcut-zone {
right: 68px;
bottom: 12px;
gap: 6px;
}
.shortcut-manage-btn--fixed {
display: none !important;
}
#listaProdutos .lista-produtos-fab {
right: 124px;
bottom: 12px;
}
#listaProdutos #listaProdutosConteudo,
#listaProdutos #solicitacoesConteudo,
#listaProdutos #kanbanSolicitacoesConteudo {
padding-bottom: 60px;
}
@media (max-width: 945px) {
.header-user-cluster .home-pesquisa-wrap {
width: min(200px, 34vw);
min-width: 120px;
}
.header { padding: 0 10px; }
.menu-logo { max-width: 100px; }
.left-side {
top: calc(var(--shell-topbar-height) + 8px);
left: 8px;
width: 44px;
padding: 0;
}
.sidebar-content {
left: 52px;
top: 0;
bottom: auto;
width: min(300px, calc(100vw - 68px));
max-height: calc(100dvh - var(--shell-topbar-height) - 24px);
}
#listaProdutos > .content-wrapper { padding: 12px; }
}
@media (max-width: 640px) {
:root { --shell-gutter: 10px; }
.header-menu { display: none; }
.header { justify-content: space-between; }
.header-user-cluster { margin-left: auto; }
.header-user-cluster .home-pesquisa-wrap {
width: min(148px, 42vw);
min-width: 108px;
padding: 0 8px;
}
.header-profile { margin-left: 8px; padding-left: 0; }
.user-badge { display: none; }
#listaProdutos > .content-wrapper { padding: 8px var(--shell-gutter) 12px; }
#listaProdutos .lp-tabs-nav { overflow-x: auto; scrollbar-width: none; }
#listaProdutos .filter-bar { gap: 6px; }
#listaProdutos .lista-produtos-fab { right: 12px; bottom: 64px; }
.floating-shortcut-zone { right: 64px; bottom: 10px; }
.shortcut-manage-btn--fixed { right: 10px; bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) {
.sidebar-content, .sidebar-hamburger, .shortcut-btn, .shortcut-manage-btn { transition: none; }
}
/* Segundo passe do shell: o menu recolhido passa a ser uma navegação real,
em vez de deixar somente um botão solto ocupando uma coluna vazia. */
@media (min-width: 946px) {
.left-side {
padding: 4px 8px 8px;
overflow: hidden;
}
/* Casinha acima do hambúrguer no rail recolhido */
.sidebar-dock-home {
display: flex;
}
.left-side:has(#sidebarContent:not(.collapsed)) .sidebar-dock-home {
display: none;
}
.sidebar-hamburger {
flex: 0 0 44px;
background: transparent;
color: var(--theme-color);
}
.sidebar-hamburger:hover {
background: var(--hover-menu-bg);
box-shadow: none;
transform: none;
}
.sidebar-content.collapsed {
visibility: visible;
opacity: 1;
pointer-events: auto;
transform: none;
left: 0;
top: 96px;
bottom: 0;
width: var(--shell-sidebar-width);
padding: 4px 8px 8px;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
scrollbar-width: none;
}
.sidebar-content.collapsed::-webkit-scrollbar { display: none; }
.sidebar-content.collapsed .side-title { display: none; }
/* No dock recolhido, a Home fica no botão acima do hambúrguer. */
.sidebar-content.collapsed > .side-primary-wrapper,
.sidebar-content.collapsed > .side-wrapper { display: none !important; }
.sidebar-content.collapsed .side-wrapper + .side-wrapper { margin-top: 4px; }
.sidebar-content.collapsed .side-menu { gap: 4px; }
.sidebar-content.collapsed .side-menu a,
.sidebar-content.collapsed .side-menu .shell-nav-button {
width: 44px;
min-height: 44px;
justify-content: center;
padding: 0;
overflow: hidden;
font-size: 0;
}
.sidebar-content.collapsed .side-menu a i,
.sidebar-content.collapsed .side-menu .shell-nav-button i {
margin: 0 !important;
font-size: 16px;
}
.sidebar-content:not(.collapsed) {
left: calc(var(--shell-sidebar-width) + 8px);
top: 8px;
bottom: 8px;
width: 272px;
}
.sidebar-content:not(.collapsed) .side-menu a i {
margin-right: 8px !important;
}
/* Dock vertical: preserva todos os atalhos sem cobrir paginação e ações. */
.floating-shortcut-zone {
top: calc(var(--shell-topbar-height) + 12px);
right: 8px;
bottom: auto;
flex-direction: column;
}
.floating-shortcut-zone .shortcut-items-container {
width: 42px;
flex-direction: column;
gap: 6px;
}
.shortcut-manage-btn--fixed { right: 7px; bottom: 12px; }
#listaProdutos > .content-wrapper { padding-right: 68px; }
#listaProdutos .lista-produtos-fab { right: 14px; bottom: 66px; }
#listaProdutos #listaProdutosConteudo,
#listaProdutos #solicitacoesConteudo,
#listaProdutos #kanbanSolicitacoesConteudo { padding-bottom: 12px; }
}
@media (max-width: 945px) {
:root { --shell-topbar-height: 56px; }
}
/* Terceiro passe: uma navegação global e uma única barra local no piloto. */
.header > #mainMenu { display: none; }
.header .header-user-cluster { margin-left: auto; }
.header .header-user-identity { margin-left: 2px; }
.header .user-badge { margin: 0; flex-shrink: 0; }
.header .header-profile { margin-left: 8px; }
#cart-icon {
position: relative;
cursor: pointer;
}
.side-primary-wrapper {
padding-bottom: 6px;
border-bottom: 1px solid var(--shell-divider);
}
.side-menu .shell-nav-button {
width: 100%;
min-height: 40px;
display: flex;
align-items: center;
padding: 8px;
border: 0;
border-radius: 6px;
background: transparent;
color: var(--theme-color);
font: inherit;
font-size: 14px;
font-weight: 400;
text-align: left;
white-space: nowrap;
cursor: pointer;
}
.side-menu .shell-nav-button:hover { background: var(--hover-menu-bg); }
@media (min-width: 946px) {
.left-side { overflow: visible; }
.sidebar-content:not(.collapsed) {
overflow-x: hidden;
}
.sidebar-content:not(.collapsed) .side-title { display: flex; }
.sidebar-content:not(.collapsed) .side-menu a,
.sidebar-content:not(.collapsed) .side-menu .shell-nav-button {
width: 100%;
justify-content: flex-start;
font-size: 14px;
}
#listaProdutos .content-section.lista-produtos-alta {
position: relative;
}
#listaProdutos .lp-tabs-nav {
min-height: 48px;
padding-right: min(55vw, 780px);
}
#listaProdutos #listaProdutosConteudo > .filter-bar {
position: absolute;
z-index: 3;
top: 0;
right: 0;
width: min(54vw, 760px);
min-height: 44px;
margin: 0;
justify-content: flex-end;
}
#listaProdutos #listaProdutosConteudo > .filter-bar > div:first-child {
min-width: 220px;
max-width: 380px;
}
#listaProdutos #listaProdutosGrid {
max-height: calc(100dvh - 148px) !important;
}
#listaProdutos .product-details {
max-height: calc(100dvh - 156px);
}
}
@media (min-width: 946px) and (max-width: 1180px) {
#listaProdutos .lp-tabs-nav { padding-right: 0; }
#listaProdutos #listaProdutosConteudo > .filter-bar {
position: static;
width: 100%;
margin-bottom: 8px;
}
}
/* Home modular: camada de navega\u00e7\u00e3o sobre os handlers legados. */
#paginaInicio > .content-wrapper {
box-sizing: border-box;
padding: 18px var(--shell-gutter) 24px;
background: transparent;
overflow: auto;
}
.mobile-operations-home { display: none !important; }
.home-module-launcher { width: 100%; margin: 0 0 18px; }
.home-module-launcher [hidden] { display: none !important; }
.home-module-heading {
min-height: 54px; display: flex; align-items: flex-end; justify-content: space-between;
gap: 16px; margin-bottom: 14px; padding-right: 62px;
}
.home-pesquisa-wrap {
display: flex;
align-items: center;
gap: 8px;
box-sizing: border-box;
flex: 1 1 200px;
width: min(280px, 28vw);
min-width: 132px;
max-width: 320px;
height: 36px;
padding: 0 12px;
border: 1px solid var(--border-color);
border-radius: 9px;
background: var(--search-bg);
color: var(--theme-color);
position: relative;
z-index: 5;
pointer-events: auto;
cursor: text;
}
.header-user-cluster .home-pesquisa-wrap {
flex: 1 1 180px;
}
.home-pesquisa-wrap > i {
color: var(--inactive-color);
pointer-events: none;
flex: 0 0 auto;
}
#homePesquisaGlobal {
flex: 1 1 auto;
min-width: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 0;
outline: none;
background: transparent;
color: var(--theme-color);
caret-color: var(--theme-color);
font: inherit;
font-size: 13px;
font-weight: 500;
cursor: text;
pointer-events: auto;
user-select: text;
-webkit-user-select: text;
-webkit-appearance: none;
appearance: none;
text-overflow: ellipsis;
}
#homePesquisaGlobal::placeholder {
color: var(--inactive-color);
opacity: 1;
}
#homePesquisaGlobal::-webkit-search-decoration,
#homePesquisaGlobal::-webkit-search-cancel-button {
-webkit-appearance: none;
}
.home-pesquisa-modal[hidden] { display: none !important; }
.home-pesquisa-modal {
position: fixed;
inset: 0;
z-index: 10020;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
background: rgba(15, 23, 42, .68);
}
.home-pesquisa-dialog {
width: min(820px, 96vw);
max-height: 82vh;
overflow: auto;
background: var(--search-bg, #14162b);
color: var(--theme-color, #f9fafb);
border: 1px solid var(--border-color);
border-radius: 14px;
box-shadow: 0 24px 70px rgba(0, 0, 0, .35);
}
.home-pesquisa-dialog-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 18px 20px;
border-bottom: 1px solid var(--border-color);
}
.home-pesquisa-dialog-head strong { font-size: 18px; }
#homePesquisaResumo { font-size: 12px; opacity: .7; margin-top: 3px; }
#homePesquisaFechar {
border: 0;
background: transparent;
color: inherit;
font-size: 22px;
cursor: pointer;
}
.home-pesquisa-lista { display: grid; gap: 10px; padding: 18px 20px; }
.home-pesquisa-grupo {
margin: 6px 0 0;
font-size: 11px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--inactive-color);
}
.home-pesquisa-card {
display: flex;
gap: 14px;
width: 100%;
padding: 15px;
text-align: left;
border: 1px solid var(--border-color);
border-radius: 10px;
background: var(--content-bg, rgb(146 151 179 / 13%));
color: inherit;
cursor: pointer;
font: inherit;
}
.home-pesquisa-card:hover,
.home-pesquisa-card:focus-visible {
border-color: #60a5fa;
outline: none;
}
.home-pesquisa-card i { margin-top: 3px; color: #60a5fa; }
.home-pesquisa-card strong { display: block; margin-bottom: 5px; }
.home-pesquisa-card small { line-height: 1.45; opacity: .86; }
.home-pesquisa-vazio,
.home-pesquisa-status {
padding: 24px;
text-align: center;
opacity: .72;
}
.home-module-eyebrow {
display: block; margin-bottom: 3px; color: #60a5fa; font-size: 11px;
font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.home-module-heading h1, .home-routine-heading h2 {
margin: 0; color: var(--content-title-color); font-size: clamp(19px, 2vw, 25px); line-height: 1.2;
}
.home-module-heading p, .home-routine-heading p {
margin: 5px 0 0; color: var(--inactive-color); font-size: 13px;
}
.home-module-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.home-module-card, .home-routine-card, .home-module-back { font: inherit; cursor: pointer; }
.home-module-card {
min-height: 118px; display: grid; grid-template-columns: 42px 1fr 18px; align-items: start;
gap: 12px; padding: 16px; border: 1px solid var(--module-color);
border-radius: 8px; background: var(--module-color);
color: #fff; text-align: left; box-shadow: 0 8px 20px rgba(0, 0, 0, .2);
transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.home-module-card:hover, .home-module-card:focus-visible {
border-color: #fff; background: var(--module-color); transform: translateY(-2px); outline: none;
}
.home-module-card-icon, .home-routine-icon {
width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
border-radius: 8px; background: #fff; color: var(--module-color); font-size: 18px;
}
.home-module-card-copy { display: grid; gap: 5px; }
.home-module-card-copy strong { font-size: 15px; line-height: 1.2; }
.home-module-card-copy small { color: #fff; font-size: 12px; line-height: 1.35; }
.home-module-card-copy em { color: #fff; font-size: 11px; font-style: normal; font-weight: 700; }
.home-module-card-arrow { align-self: center; color: #fff; font-size: 11px; }
.home-module-back {
min-height: 36px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px;
border: 1px solid var(--border-color); border-radius: 6px; background: transparent; color: var(--theme-color);
}
.home-routine-panel {
padding: 0 12px 12px; border: 1px solid var(--module-color); border-radius: 8px;
background: #0f172a; overflow: hidden;
}
.home-routine-heading {
min-height: 54px; display: flex; align-items: center; gap: 10px; margin: 0 -12px 10px;
padding: 10px 12px; background: var(--module-color); color: #fff;
}
.home-routine-heading h2, .home-routine-heading p { color: #fff; }
.home-routine-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; }
.home-routine-grid.is-area-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.home-area-card {
min-height: 136px; display: grid; grid-template-columns: 42px 1fr 14px; align-items: start;
gap: 12px; padding: 16px; border: 1px solid #334155; border-top: 4px solid var(--module-color);
border-radius: 8px; background: #172033; color: #f8fafc; text-align: left; font: inherit; cursor: pointer;
}
.home-area-card:hover, .home-area-card:focus-visible { border-color: var(--module-color); outline: none; }
.home-area-card > span:nth-child(2) { display: grid; gap: 6px; }
.home-area-card strong { font-size: 16px; }
.home-area-card small { color: #cbd5e1; font-size: 12px; line-height: 1.35; }
.home-area-card em { color: var(--module-color); font-size: 11px; font-style: normal; font-weight: 700; }
.home-area-card-icon {
width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
border-radius: 8px; background: var(--module-color); color: #fff; font-size: 17px;
}
.home-area-card > .fa-chevron-right { align-self: center; color: #94a3b8; font-size: 11px; }
.home-area-section {
min-width: 0; padding: 14px; border: 1px solid #334155; border-top: 4px solid var(--module-color);
border-radius: 8px; background: #172033; color: #f8fafc;
}
.home-area-heading { display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: 11px; margin-bottom: 12px; }
.home-area-heading--with-gear { grid-template-columns: 40px 1fr auto; }
.home-area-heading > span:nth-child(2) { display: grid; gap: 3px; min-width: 0; }
.home-area-heading strong { font-size: 16px; }
.home-area-heading small { color: #cbd5e1; font-size: 12px; line-height: 1.3; }
.home-area-gear-saldo-guardar {
width: 34px; height: 34px; border: 1px solid #334155; border-radius: 8px;
background: #0f172a; color: #cbd5e1; cursor: pointer; display: inline-flex;
align-items: center; justify-content: center; padding: 0;
}
.home-area-gear-saldo-guardar:hover,
.home-area-gear-saldo-guardar:focus-visible {
color: #fff; border-color: var(--module-color); outline: none;
}
.light-mode .home-area-gear-saldo-guardar { background: #fff; color: #475569; border-color: #d1d5db; }
.home-area-routines { display: grid; gap: 7px; }
.home-area-routine {
width: 100%; min-height: 42px; display: grid; grid-template-columns: 22px 1fr 12px;
align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid #334155; border-radius: 6px;
background: #0f172a; color: #f8fafc; text-align: left; font: inherit; font-size: 13px; cursor: pointer;
}
.home-area-routine:hover, .home-area-routine:focus-visible {
border-color: var(--module-color); background: #111c31; outline: none;
}
.home-area-routine > i:first-child { color: var(--module-color); text-align: center; }
.home-area-routine > i:last-child { color: #94a3b8; font-size: 10px; }
.light-mode .home-area-section { background: #f8fafc; color: #111827; border-color: #d1d5db; border-top-color: var(--module-color); }
.light-mode .home-area-heading small { color: #475569; }
.light-mode .home-area-routine { background: #fff; color: #111827; border-color: #d1d5db; }
.home-routine-card {
min-height: 52px; display: grid; grid-template-columns: 32px 1fr 14px; align-items: center;
gap: 9px; padding: 10px 12px; border: 1px solid var(--border-color); border-radius: 7px;
background: #172033; color: #f8fafc; text-align: left;
}
.home-routine-card:hover, .home-routine-card:focus-visible { border-color: var(--module-color); outline: 2px solid var(--module-color); }
.home-routine-card-icon { color: var(--module-color); text-align: center; }
.home-routine-arrow { color: #64748b; font-size: 10px; }
.light-mode .home-routine-panel { background: #eef2f7; }
.light-mode .home-routine-card { background: #fff; color: #111827; }
.home-weekly-production { display: none !important; }
.home-reservations-section {
width: 100%; max-width: none; margin: 0; padding: 14px; border: 0; border-radius: 8px;
background: #0f172a; box-shadow: none; color: #f8fafc;
}
.home-reservations-section[hidden] { display: none !important; }
.home-reservations-section .content-section-title { color: #f8fafc; }
.home-reservations-section .agenda-cal-day {
background: #1f2937;
border-color: #374151;
color: #f8fafc;
}
.home-reservations-section .agenda-cal-day.is-today {
background: #1e3a5f;
border-color: #60a5fa;
}
.home-reservations-section .agenda-sidebar-nav,
.home-reservations-section .agenda-legenda-toggle,
.home-reservations-section .agenda-legenda-itens,
.home-reservations-section .agenda-mes-expand-btn {
background: #172033 !important;
border-color: #374151 !important;
color: #f8fafc !important;
}
.home-reservations-section .agenda-cal-head,
.home-reservations-section .agenda-legenda-titulo { color: #94a3b8; }
.home-reservations-section .agenda-legenda-item { color: #f8fafc; }
.light-mode .home-reservations-section { background: #f8fafc; color: #111827; }
.light-mode .home-reservations-section .agenda-cal-day { background: #fff; color: #111827; border-color: #d1d5db; }
.light-mode .home-reservations-section .agenda-cal-day.is-today { background: #eff6ff; }
.light-mode .home-reservations-section .agenda-sidebar-nav,
.light-mode .home-reservations-section .agenda-legenda-toggle,
.light-mode .home-reservations-section .agenda-legenda-itens,
.light-mode .home-reservations-section .agenda-mes-expand-btn { background: #fff !important; color: #111827 !important; border-color: #d1d5db !important; }
/* A Home modular substituiu a antiga central mobile. Reexibe os módulos e o
calendário no celular, que eram ocultados pela regra legada acima. */
@media (max-width: 640px), (max-width: 900px) and (max-height: 500px) {
#paginaInicio > .content-wrapper {
padding: 60px 10px calc(18px + env(safe-area-inset-bottom, 0px)) 56px;
}
#paginaInicio .content-wrapper > .mobile-operations-home {
display: none !important;
}
#paginaInicio .content-wrapper > .home-module-launcher,
#paginaInicio .content-wrapper > .home-reservations-section {
display: block !important;
}
#paginaInicio .content-wrapper > .home-reservations-section[hidden] {
display: none !important;
}
.home-module-heading { min-height: 0; align-items: flex-start; padding-right: 0; }
.home-module-heading h1 { font-size: 23px; line-height: 1.15; }
.home-module-heading p { max-width: 300px; font-size: 13px; line-height: 1.4; }
.home-module-grid,
.home-routine-grid,
.home-routine-grid.is-area-grid { grid-template-columns: 1fr; }
.home-module-grid { gap: 10px; }
.home-module-card { min-height: 112px; padding: 15px; gap: 13px; }
.home-module-card-icon { width: 42px; height: 42px; font-size: 18px; }
.home-module-card-copy strong { font-size: 16px; }
.home-module-card-copy small { font-size: 13px; line-height: 1.35; }
.home-module-card-copy em { font-size: 12px; }
.home-module-card-arrow { font-size: 13px; }
.home-module-back { padding: 7px 9px; font-size: 0; }
.home-module-back i { font-size: 13px; }
.home-reservations-section { padding: 10px; }
/* A grade mensal de sete colunas não é legível no celular. Mantém os
mesmos dias e ações, apresentados como agenda vertical. */
.home-reservations-section .content-section-title { font-size: 15px; }
.home-reservations-section .agenda-mes-nav,
.home-reservations-section .agenda-cal-toolbar-actions { display: none !important; }
.agenda-cal-layout { overflow: visible; }
.home-reservations-section .agenda-cal-sidebar {
order: -1;
display: none;
width: 100%;
margin: 0 0 8px;
}
.home-reservations-section .agenda-sidebar-nav {
display: none !important;
}
.home-reservations-section #agendaMesTitulo { font-size: 14px !important; }
.agenda-cal-main {
width: 100%;
flex: 0 0 auto !important;
height: auto !important;
min-height: 220px;
overflow: visible !important;
background: #f4f1fb;
border-radius: 18px;
box-shadow: 0 10px 28px rgba(88, 28, 135, .12);
}
#agendaMobileCalHeader:not([hidden]) {
display: flex;
}
.agenda-calendario-grid.is-mobile-agenda {
display: flex !important;
flex-direction: column;
gap: 8px;
padding: 10px 10px 14px;
background: #f4f1fb;
min-height: 180px;
}
.agenda-calendario-grid.is-mobile-agenda .agenda-cal-day {
width: 100%;
min-height: 76px;
display: grid;
grid-template-columns: 58px minmax(0, 1fr);
align-items: center;
gap: 10px;
padding: 10px;
text-align: left;
border-radius: 14px;
background: #fff;
border: 0;
color: #3b0764;
box-shadow: 0 4px 12px rgba(109, 40, 217, .08);
}
.agenda-calendario-grid.is-mobile-agenda .agenda-cal-day.is-today {
box-shadow: 0 0 0 2px #7c3aed inset;
}
.agenda-calendario-grid.is-mobile-agenda .agenda-cal-num {
align-self: stretch;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1px;
margin: 0;
border-right: 2px solid #ddd6fe;
font-size: 11px;
text-transform: uppercase;
color: #6d28d9;
}
.agenda-calendario-grid.is-mobile-agenda .agenda-cal-num strong { font-size: 22px; line-height: 1; color: #4c1d95; display: inline-flex; align-items: center; gap: 4px; }
.agenda-calendario-grid.is-mobile-agenda .agenda-cal-niver i { font-size: 12px; }
.agenda-calendario-grid.is-mobile-agenda .agenda-cal-num small { font-size: 10px; color: #7c3aed; }
.agenda-calendario-grid.is-mobile-agenda .agenda-cal-reservas { min-width: 0; gap: 5px; }
.agenda-calendario-grid.is-mobile-agenda .agenda-cal-reserva-item.is-mobile-stack {
min-height: 40px;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 8px;
padding: 8px 10px;
border-radius: 10px;
background: #faf5ff;
border: 1px solid #ede9fe;
color: #3b0764;
}
.agenda-mobile-reserva-hora { font-size: 12px; font-weight: 800; white-space: nowrap; }
.agenda-mobile-reserva-assunto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; }
.agenda-mobile-reserva-icones { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; }
.agenda-mobile-reserva-icones .agenda-chip-convocado-icon { display: inline-block; font-size: 11px; }
.agenda-mobile-empty { margin: 0; font-size: 12px; color: #94a3b8; }
}
/* Compras: contraste operacional das ações em todos os painéis de detalhe. */
#modalDetalhesPedidoCompras .cp-sheet-actions,
#modalNfePedidos .cp-sheet-actions { background:#f4fbfc !important; color:#334155 !important; }
#modalDetalhesPedidoCompras .cp-sheet-actions-title span,
#modalNfePedidos .cp-sheet-actions-title span { color:#26323d !important; opacity:1 !important; }
#modalDetalhesPedidoCompras .cp-sheet-actions-title small,
#modalNfePedidos .cp-sheet-actions-title small { color:#526579 !important; opacity:1 !important; }
#modalDetalhesPedidoCompras .cp-sheet-action > span,
#modalNfePedidos .cp-sheet-action > span { color:#64748b !important; opacity:1 !important; }
#modalDetalhesPedidoCompras .cp-sheet-action > i,
#modalNfePedidos .cp-sheet-action > i { color:#7c8798 !important; opacity:1 !important; }
#modalDetalhesPedidoCompras .cp-sheet-action.is-ready > span,
#modalNfePedidos .cp-sheet-action.is-ready > span { color:#a53c36 !important; font-weight:650 !important; }
#modalDetalhesPedidoCompras .cp-sheet-action.is-ready > i,
#modalNfePedidos .cp-sheet-action.is-ready > i { color:#c34237 !important; }
#modalDetalhesPedidoCompras .cp-sheet-action small,
#modalNfePedidos .cp-sheet-action small { opacity:1 !important; }
/* Preparação do pedido legado no mesmo padrão claro e compacto dos detalhes Omie. */
#modalDetalhesPedidoCompras.cp-purchase-preparation-modal .cp-detail-body {
padding:12px 14px 16px !important; overflow:auto !important;
background:#f4f6f8 !important; color:#26323d !important;
}
#modalDetalhesPedidoCompras.cp-purchase-preparation-modal #modalPedidoBody > div {
border:1px solid #d8dee8 !important; border-radius:6px !important;
background:#fff !important; box-shadow:none !important;
}
#modalDetalhesPedidoCompras.cp-purchase-preparation-modal #modalPedidoBody [style*="background:#f0fdf4"],
#modalDetalhesPedidoCompras.cp-purchase-preparation-modal #modalPedidoBody [style*="background:#eff6ff"],
#modalDetalhesPedidoCompras.cp-purchase-preparation-modal #modalPedidoBody [style*="background:#f8fafc"],
#modalDetalhesPedidoCompras.cp-purchase-preparation-modal #modalPedidoBody [style*="background:#f9fafb"],
#modalDetalhesPedidoCompras.cp-purchase-preparation-modal #modalPedidoBody [style*="background:#ffffff"] {
background:#fff !important; border-color:#d8dee8 !important; box-shadow:none !important;
}
#modalDetalhesPedidoCompras.cp-purchase-preparation-modal #modalPedidoBody [style*="background:#f9fafb"] * {
color:#334155 !important; opacity:1 !important;
}
#modalDetalhesPedidoCompras.cp-purchase-preparation-modal #modalPedidoBody [style*="color:#1f2937"],
#modalDetalhesPedidoCompras.cp-purchase-preparation-modal #modalPedidoBody [style*="color:#374151"] { color:#26323d !important; opacity:1 !important; }
#modalDetalhesPedidoCompras.cp-purchase-preparation-modal #modalPedidoBody [style*="color:#6b7280"] { color:#526579 !important; opacity:1 !important; }
#modalDetalhesPedidoCompras.cp-purchase-preparation-modal #modalPedidoBody [style*="color:#047857"],
#modalDetalhesPedidoCompras.cp-purchase-preparation-modal #modalPedidoBody [style*="color:#1e40af"] { color:#a53c36 !important; }
#modalDetalhesPedidoCompras.cp-purchase-preparation-modal #modalPedidoBody input,
#modalDetalhesPedidoCompras.cp-purchase-preparation-modal #modalPedidoBody select,
#modalDetalhesPedidoCompras.cp-purchase-preparation-modal #modalPedidoBody textarea {
background:#fff !important; border-color:#b8c4d1 !important; color:#26323d !important;
}
#modalDetalhesPedidoCompras.cp-purchase-preparation-modal #modalPedidoBody input::placeholder,
#modalDetalhesPedidoCompras.cp-purchase-preparation-modal #modalPedidoBody textarea::placeholder { color:#7c8798 !important; }
.cp-sheet-image-cell { width:44px; padding:5px 4px !important; text-align:center; }
.cp-product-thumb {
width:34px; height:34px; padding:0; display:inline-flex; align-items:center; justify-content:center;
overflow:hidden; border:1px solid #cbd5e1; border-radius:5px; background:#fff; color:#7c8798;
cursor:zoom-in; vertical-align:middle;
}
.cp-product-thumb:hover, .cp-product-thumb:focus-visible { border-color:#c34237; outline:2px solid rgba(195,66,55,.18); }
.cp-product-thumb img { width:100%; height:100%; object-fit:cover; }
.cp-product-thumb > i[hidden],
.cp-product-thumb > img[hidden] { display:none !important; }
.cp-product-thumb[data-image-loaded="true"] > i { display:none !important; }
.cp-product-thumb--empty { cursor:default; background:#f1f5f9; color:#94a3b8; }
.cp-product-thumb--empty:hover { border-color:#cbd5e1; outline:0; }
#modalDetalhesPedidoCompras.cp-purchase-preparation-modal .cp-prep-actions {
display:grid !important; grid-template-columns:auto minmax(0,1fr) !important; align-items:center !important;
gap:8px 12px !important; margin-top:10px !important; padding:10px 12px !important;
background:#fff !important; border:1px solid #d8dee8 !important;
}
#modalDetalhesPedidoCompras.cp-purchase-preparation-modal .cp-prep-actions-title {
grid-column:1/-1; margin:0 0 2px !important; padding-bottom:7px; border-bottom:1px solid #e2e8f0;
color:#a53c36 !important; font-size:12px !important;
}
#modalDetalhesPedidoCompras.cp-purchase-preparation-modal .cp-prep-freight-toggle { margin:0 !important; }
#modalDetalhesPedidoCompras.cp-purchase-preparation-modal .cp-prep-actions-grid { display:flex !important; flex-wrap:wrap; justify-content:flex-end; gap:6px !important; }
#modalDetalhesPedidoCompras.cp-purchase-preparation-modal .cp-prep-actions-aux { display:flex !important; gap:6px !important; }
#modalDetalhesPedidoCompras.cp-purchase-preparation-modal .cp-prep-action {
width:auto !important; min-height:32px !important; padding:6px 10px !important; gap:6px !important;
border:1px solid #cbd5e1 !important; border-radius:5px !important; background:#fff !important;
color:#475569 !important; font-size:11px !important; white-space:nowrap;
}
#modalDetalhesPedidoCompras.cp-purchase-preparation-modal .cp-prep-action > span { color:inherit !important; opacity:1 !important; }
#modalDetalhesPedidoCompras.cp-purchase-preparation-modal .cp-prep-action--primary { border-color:#c34237 !important; background:#c34237 !important; color:#fff !important; }
#modalDetalhesPedidoCompras.cp-purchase-preparation-modal .cp-prep-action--save { border-color:#55a18e !important; color:#28715f !important; }
#modalDetalhesPedidoCompras.cp-purchase-preparation-modal .cp-prep-action:hover { filter:brightness(.97); }
@media (max-width:720px) {
#modalDetalhesPedidoCompras.cp-purchase-preparation-modal .cp-prep-actions { grid-template-columns:1fr !important; }
#modalDetalhesPedidoCompras.cp-purchase-preparation-modal .cp-prep-actions-grid { justify-content:flex-start; }
}
/* Expedição rápida: fluxo dedicado, sem controles da tela de movimentações. */
.exp-rapida-overlay {
position: fixed;
inset: 0;
z-index: 10060;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
background: rgba(2, 6, 23, .72);
backdrop-filter: blur(3px);
}
.exp-rapida-panel {
width: min(440px, 100%);
max-height: calc(100vh - 32px);
overflow-y: auto;
padding: 20px;
border: 1px solid #334155;
border-radius: 8px;
background: #171b27;
color: #e5e7eb;
box-shadow: 0 20px 48px rgba(0, 0, 0, .4);
}
.exp-rapida-header,
.exp-rapida-actions,
.exp-rapida-rota {
display: flex;
align-items: center;
}
.exp-rapida-header {
justify-content: space-between;
gap: 16px;
margin-bottom: 16px;
}
.exp-rapida-eyebrow {
display: inline-flex;
align-items: center;
gap: 6px;
margin-bottom: 4px;
color: #67e8f9;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
}
.exp-rapida-header h2 {
margin: 0;
color: #f8fafc;
font-size: 18px;
line-height: 1.25;
}
.exp-rapida-close {
width: 36px;
height: 36px;
flex: 0 0 36px;
border: 0;
border-radius: 8px;
background: transparent;
color: #94a3b8;
cursor: pointer;
}
.exp-rapida-close:hover { background: #242a38; color: #fff; }
.exp-rapida-produto {
display: flex;
flex-direction: column;
gap: 4px;
padding: 12px;
border: 1px solid #2b3445;
border-radius: 8px;
background: #1e2431;
}
.exp-rapida-produto strong { color: #f8fafc; font-size: 14px; line-height: 1.35; }
.exp-rapida-produto span { color: #94a3b8; font-size: 12px; }
.exp-rapida-rota {
justify-content: space-between;
gap: 12px;
margin: 14px 0;
padding: 12px;
border-radius: 8px;
background: rgba(8, 145, 178, .1);
color: #67e8f9;
}
.exp-rapida-rota div { min-width: 0; }
.exp-rapida-rota div:last-child { text-align: right; }
.exp-rapida-rota span { display: block; color: #94a3b8; font-size: 11px; }
.exp-rapida-rota strong { display: block; color: #e0f2fe; font-size: 13px; }
.exp-rapida-saldos {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
margin-bottom: 16px;
}
.exp-rapida-saldo {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
padding: 10px 12px;
border: 1px solid #2b3445;
border-radius: 8px;
background: #1e2431;
color: #aeb8c8;
font-size: 12px;
}
.exp-rapida-saldo:last-child {
text-align: right;
}
.exp-rapida-saldo span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.exp-rapida-saldo strong { color: #fbbf24; font-size: 14px; }
.exp-rapida-field {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 14px;
color: #cbd5e1;
font-size: 12px;
font-weight: 600;
}
.exp-rapida-field small { color: #7c8799; font-weight: 400; }
.exp-rapida-field input,
.exp-rapida-field textarea {
box-sizing: border-box;
width: 100%;
border: 1px solid #354052;
border-radius: 8px;
padding: 11px 12px;
background: #202633;
color: #f8fafc;
font: inherit;
font-size: 14px;
outline: none;
}
.exp-rapida-field input:focus,
.exp-rapida-field textarea:focus { border-color: #22d3ee; box-shadow: 0 0 0 3px rgba(34, 211, 238, .13); }
.exp-rapida-field textarea { resize: vertical; }
.exp-rapida-mensagem { min-height: 20px; margin-top: 12px; font-size: 12px; line-height: 1.4; }
.exp-rapida-mensagem.is-error { color: #fca5a5; }
.exp-rapida-mensagem.is-success { color: #86efac; }
.exp-rapida-mensagem.is-info { color: #bae6fd; }
.exp-rapida-actions { justify-content: flex-end; gap: 10px; margin-top: 8px; }
.exp-rapida-btn,
.exp-rapida-reverter {
min-height: 42px;
border-radius: 8px;
padding: 10px 16px;
font-size: 13px;
font-weight: 700;
cursor: pointer;
}
.exp-rapida-btn--secondary { border: 1px solid #3b4658; background: transparent; color: #cbd5e1; }
.exp-rapida-btn--primary { border: 0; background: #0891b2; color: #fff; }
.exp-rapida-btn--primary:hover { background: #0e7490; }
.exp-rapida-btn:disabled { cursor: wait; opacity: .65; }
.exp-rapida-reverter { width: 100%; margin-top: 10px; border: 1px solid #7f1d1d; background: transparent; color: #fca5a5; }
@media (max-width: 480px) {
.exp-rapida-overlay { align-items: flex-end; padding: 8px; }
.exp-rapida-panel { max-height: calc(100vh - 16px); padding: 16px; }
.exp-rapida-actions { flex-direction: column-reverse; }
.exp-rapida-btn { width: 100%; }
.exp-rapida-saldos { grid-template-columns: 1fr; }
.exp-rapida-saldo:last-child { text-align: left; }
}
/* === PIR / Qualidade: shell operacional responsivo ====================== */
#qualidadeFabricaPane .pir-page-heading { min-height: 42px; }
#qualidadeFabricaPane .pir-page-subtitle { max-width: 760px; line-height: 1.4; }
#qualidadeFabricaPane .pir-action-toolbar { justify-content: space-between; }
#qualidadeFabricaPane .pir-action-primary,
#qualidadeFabricaPane .pir-action-secondary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#qualidadeFabricaPane .pir-action-more { display: contents; }
#qualidadeFabricaPane .pir-action-more > summary { display: none; }
#qualidadeFabricaPane .pir-action-toolbar .content-button,
#qualidadeFabricaPane .pir-action-toolbar label { min-height: 40px; border-radius: 8px !important; }
#qualidadeFabricaPane .pir-pending-panel,
#qualidadeFabricaPane .pir-pending-list { border-radius: 8px !important; }
#qualidadeFabricaPane .pir-pending-table tbody tr:last-child { border-bottom: 0 !important; }
#qualidadeFabricaPane .qualidade-pir-pendente-row:focus-within { outline: 2px solid #2dd4bf; outline-offset: -2px; }
@media (max-width: 900px) {
#qualidadeFabricaPane .content-wrapper { padding-inline: 12px !important; }
#qualidadeFabricaPane .content-section { padding-inline: 0 !important; }
#qualidadeFabricaPane .pir-page-heading { align-items: flex-start !important; }
#qualidadeFabricaPane #qualidadeAcoesRapidas.pir-action-toolbar {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 8px !important;
width: 100%;
}
#qualidadeFabricaPane .pir-action-primary { display: contents; }
#qualidadeFabricaPane .pir-action-primary > #qualidadeNovoRegistroBtn { grid-column: 1 / -1; }
#qualidadeFabricaPane .pir-action-primary > label,
#qualidadeFabricaPane .pir-action-primary > .content-button {
display: inline-flex !important;
width: 100%;
min-width: 0;
min-height: 44px;
justify-content: center;
}
#qualidadeFabricaPane .pir-action-more { display: block; min-width: 0; }
#qualidadeFabricaPane .pir-action-more[open] { grid-column: 1 / -1; }
#qualidadeFabricaPane .pir-action-more > summary {
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 8px 12px;
border: 1px solid var(--border-color);
border-radius: 8px;
background: #334155;
color: #fff;
font-size: 13px;
font-weight: 700;
cursor: pointer;
list-style: none;
}
#qualidadeFabricaPane .pir-action-more > summary::-webkit-details-marker { display: none; }
#qualidadeFabricaPane .pir-action-more[open] > summary { margin-bottom: 8px; }
#qualidadeFabricaPane .pir-action-secondary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#qualidadeFabricaPane .pir-action-secondary .content-button {
display: inline-flex !important;
width: 100%;
min-width: 0;
min-height: 44px;
justify-content: center;
}
#qualidadeFabricaPane .pir-action-more[open] #qualidadeCriarBtn,
#qualidadeFabricaPane .pir-action-more[open] #qualidadeRelatorioBtn,
#qualidadeFabricaPane .pir-action-more[open] #qualidadeRelatorioTabelaBtn,
#qualidadeFabricaPane .pir-action-more[open] #qualidadeListaPirCodigosBtn {
display: inline-flex !important;
}
#qualidadeFabricaPane .pir-action-secondary #qualidadeRegistroBtn[style*="none"] { display: none !important; }
#qualidadeFabricaPane .pir-pending-panel { padding: 12px !important; }
#qualidadeFabricaPane .pir-pending-header { align-items: stretch !important; }
#qualidadeFabricaPane #qualidadePirPendentesBusca {
flex-basis: 100% !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
min-height: 44px;
font-size: 16px;
}
#qualidadeFabricaPane .pir-alert-legend {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 7px !important;
overflow: visible;
padding-bottom: 2px;
}
#qualidadeFabricaPane .pir-alert-legend > span { min-width: 0; }
#qualidadeFabricaPane .pir-pending-list { max-height: none !important; overflow: visible !important; border: 0 !important; }
#qualidadeFabricaPane .pir-pending-table,
#qualidadeFabricaPane .pir-pending-table tbody { display: block; width: 100%; min-width: 0 !important; }
#qualidadeFabricaPane #qualidadePirPendentesWrap table.pir-pending-table { min-width: 0 !important; }
#qualidadeFabricaPane .pir-pending-table thead { display: none; }
#qualidadeFabricaPane .pir-pending-table tbody {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
#qualidadeFabricaPane .pir-pending-table .qualidade-pir-pendente-row {
min-width: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 12px;
padding: 12px;
border: 1px solid var(--border-color) !important;
border-radius: 8px;
background: var(--content-bg);
}
#qualidadeFabricaPane .pir-pending-table .qualidade-pir-pendente-row > td {
min-width: 0;
padding: 7px 0 !important;
text-align: left !important;
white-space: normal !important;
border: 0;
}
#qualidadeFabricaPane .pir-pending-table .qualidade-pir-pendente-row > td::before {
content: attr(data-label);
display: block;
margin-bottom: 3px;
color: #94a3b8;
font-size: 10px;
font-weight: 800;
letter-spacing: .05em;
text-transform: uppercase;
}
#qualidadeFabricaPane .pir-pending-table .pir-cell-check,
#qualidadeFabricaPane .pir-pending-table .pir-cell-code,
#qualidadeFabricaPane .pir-pending-table .pir-cell-description,
#qualidadeFabricaPane .pir-pending-table .pir-cell-alerts,
#qualidadeFabricaPane .pir-pending-table .pir-cell-obs,
#qualidadeFabricaPane .pir-pending-table .pir-cell-created { grid-column: 1 / -1; }
#qualidadeFabricaPane .pir-pending-table .pir-cell-check { order: 0; }
#qualidadeFabricaPane .pir-pending-table .pir-cell-check::before { display: none; }
#qualidadeFabricaPane .pir-pending-table .pir-cell-code { order: 1; font-size: 14px; }
#qualidadeFabricaPane .pir-pending-table .pir-cell-description { order: 2; line-height: 1.4; overflow-wrap: anywhere; }
#qualidadeFabricaPane .pir-pending-table .pir-cell-alerts { order: 3; }
#qualidadeFabricaPane .pir-pending-table .pir-cell-alerts > div { justify-content: flex-start !important; }
#qualidadeFabricaPane .pir-pending-table .pir-cell-lot { order: 4; }
#qualidadeFabricaPane .pir-pending-table .pir-cell-nfe { order: 5; }
#qualidadeFabricaPane .pir-pending-table .pir-cell-obs { order: 6; }
#qualidadeFabricaPane .pir-pending-table .pir-cell-quantity { order: 7; }
#qualidadeFabricaPane .pir-pending-table .pir-cell-created { order: 8; }
#qualidadeFabricaPane .pir-pending-table tbody > tr:not(.qualidade-pir-pendente-row) { display: block; grid-column: 1 / -1; }
#qualidadeFabricaPane .pir-pending-table tbody > tr:not(.qualidade-pir-pendente-row) td { display: block; width: 100%; }
}
@media (max-width: 640px) {
#qualidadeFabricaPane .content-wrapper { padding: 58px 8px 20px 56px !important; }
#qualidadeFabricaPane .pir-page-heading { gap: 6px !important; }
#qualidadeFabricaPane .pir-page-heading .content-section-title { font-size: 17px; }
#qualidadeFabricaPane .pir-page-subtitle { font-size: 12px !important; }
#qualidadeFabricaPane #qualidadePirPendentesCount { font-size: 12px !important; }
#qualidadeFabricaPane .pir-action-secondary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#qualidadeFabricaPane .pir-action-secondary .content-button { padding-inline: 8px; font-size: 12px; }
#qualidadeFabricaPane .pir-pending-panel { padding: 10px !important; }
#qualidadeFabricaPane .pir-pending-header > div:first-child { min-width: 0 !important; }
#qualidadeFabricaPane .pir-pending-table tbody { grid-template-columns: 1fr; }
}
/* PIR v2 — mesma linguagem operacional de Identificação e Armazenamento. */
#qualidadeFabricaPane {
--pir-navy: #0c1b33;
--pir-teal: #087f6b;
--pir-teal-soft: #dff5ef;
--pir-ink: #152338;
--pir-muted: #607086;
--pir-line: #d4dde8;
--pir-surface: #ffffff;
--pir-canvas: #edf2f7;
color: var(--pir-ink) !important;
background: var(--pir-canvas) !important;
}
#qualidadeFabricaPane .content-wrapper {
padding-top: 18px !important;
background: var(--pir-canvas) !important;
}
#qualidadeFabricaPane .content-section {
overflow: hidden;
margin: 0 !important;
padding: 0 !important;
border: 1px solid #c7d2e0;
border-radius: 8px;
background: var(--pir-surface);
box-shadow: 0 3px 14px rgba(15, 35, 60, .08);
}
#qualidadeFabricaPane .pir-page-heading {
min-height: 62px;
margin: 0;
padding: 12px 16px;
color: #fff;
background: var(--pir-navy);
border-bottom: 3px solid #25b99a;
}
#qualidadeFabricaPane .pir-page-heading .content-section-title {
color: #fff !important;
font-size: 18px;
font-weight: 800;
}
#qualidadeFabricaPane .pir-page-heading .content-section-title i { color: #60dfbf !important; }
#qualidadeFabricaPane .pir-page-subtitle { color: #c5d1e1 !important; }
#qualidadeFabricaPane #qualidadePirPendentesCount {
padding: 6px 10px !important;
color: #063b31 !important;
background: #8ce9d1 !important;
border: 1px solid #b9f2e4;
border-radius: 6px !important;
box-shadow: none !important;
}
#qualidadeFabricaPane #qualidadeAcoesRapidas.pir-action-toolbar {
margin: 0 !important;
padding: 10px 16px;
background: #fff;
border-bottom: 1px solid var(--pir-line);
}
#qualidadeFabricaPane .pir-action-toolbar .content-button,
#qualidadeFabricaPane .pir-action-toolbar label {
min-height: 38px;
color: var(--pir-ink) !important;
-webkit-text-fill-color: var(--pir-ink) !important;
background: #f5f8fb !important;
border: 1px solid #b9c7d8 !important;
border-radius: 6px !important;
box-shadow: none !important;
}
#qualidadeFabricaPane #qualidadeNovoRegistroBtn {
color: #fff !important;
-webkit-text-fill-color: #fff !important;
background: var(--pir-teal) !important;
border-color: var(--pir-teal) !important;
}
#qualidadeFabricaPane .pir-action-more > summary {
border-color: #b9c7d8 !important;
background: #eef3f8 !important;
color: #33465e !important;
}
#qualidadeFabricaPane #qualidadePirPendentesWrap { margin: 0 !important; padding: 14px; background: var(--pir-canvas); }
#qualidadeFabricaPane .pir-pending-panel {
padding: 0 !important;
overflow: hidden;
border: 1px solid var(--pir-line) !important;
background: #fff !important;
}
/* Abas de guia ENG (Sandro.M, Guilherme.O…): texto escuro em fundo claro */
#qualidadeFabricaPane #qualidadePirEngGuiasBar {
gap: 8px;
margin-bottom: 10px;
}
#qualidadeFabricaPane #qualidadePirEngGuiasBar .js-pir-eng-guia {
display: inline-flex !important;
align-items: center;
gap: 6px;
padding: 7px 12px !important;
border: 1px solid #b9c7d8 !important;
border-radius: 8px !important;
background: #ffffff !important;
color: #152338 !important;
-webkit-text-fill-color: #152338 !important;
font-weight: 600 !important;
font-size: 13px !important;
cursor: pointer;
box-shadow: none !important;
}
#qualidadeFabricaPane #qualidadePirEngGuiasBar .js-pir-eng-guia.is-active {
background: #0f766e !important;
border-color: #0f766e !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-weight: 700 !important;
}
#qualidadeFabricaPane .pir-pending-header { margin: 0 !important; padding: 12px 14px 8px; }
#qualidadeFabricaPane .pir-pending-header > div:first-child { color: var(--pir-ink); }
#qualidadeFabricaPane #qualidadePirPendentesBusca {
min-height: 42px;
color: var(--pir-ink) !important;
background: #fff !important;
border-color: #aebdd0 !important;
}
#qualidadeFabricaPane .pir-alert-legend { margin: 0 !important; padding: 0 14px 10px; color: var(--pir-muted) !important; }
#qualidadeFabricaPane .pir-pending-list { max-height: calc(100dvh - 270px) !important; border: 0 !important; border-top: 1px solid var(--pir-line) !important; }
#qualidadeFabricaPane .pir-pending-table { color: var(--pir-ink); background: #fff; }
#qualidadeFabricaPane .pir-pending-table thead tr { color: #33465e !important; background: #e8eef5 !important; }
#qualidadeFabricaPane .pir-pending-table thead th {
padding: 10px 12px !important;
color: #41546d !important;
background: #e8eef5 !important;
border-bottom: 1px solid #becbdd;
font-size: 11px;
letter-spacing: .04em;
text-transform: uppercase;
}
#qualidadeFabricaPane .qualidade-pir-pendente-row { color: var(--pir-ink); background: #fff; }
#qualidadeFabricaPane .qualidade-pir-pendente-row:hover { background: #f1faf7 !important; }
#qualidadeFabricaPane .pir-cell-code { color: #075c9c !important; }
#qualidadeFabricaPane .pir-cell-created { color: var(--pir-muted) !important; }
#qualidadeFabricaPane .pir-cell-photo { width: 76px; padding: 7px 9px; }
#qualidadeFabricaPane .pir-product-photo {
position: relative;
display: grid;
place-items: center;
width: 58px;
height: 58px;
padding: 0;
overflow: hidden;
border: 1px solid #c7d3e1;
border-radius: 6px;
background: #f3f6fa;
cursor: zoom-in;
}
#qualidadeFabricaPane .pir-product-photo img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
#qualidadeFabricaPane .pir-product-photo span { display: none; color: #8a9aaf; font-size: 20px; }
#qualidadeFabricaPane .pir-product-photo.is-missing img { display: none; }
#qualidadeFabricaPane .pir-product-photo.is-missing span { display: inline-flex; }
#qualidadeFabricaPane .pir-cell-action { padding: 8px 10px; text-align: center; }
#qualidadeFabricaPane .pir-inspect-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 38px;
padding: 7px 10px;
color: #fff;
background: var(--pir-teal);
border: 1px solid var(--pir-teal);
border-radius: 6px;
font-size: 12px;
font-weight: 800;
cursor: pointer;
}
@media (max-width: 900px) {
#qualidadeFabricaPane .content-wrapper { padding: 12px !important; }
#qualidadeFabricaPane #qualidadeAcoesRapidas.pir-action-toolbar { padding: 10px 12px; }
#qualidadeFabricaPane #qualidadePirPendentesWrap { padding: 10px; }
#qualidadeFabricaPane .pir-pending-table tbody { gap: 10px; padding: 10px; background: var(--pir-canvas); }
#qualidadeFabricaPane .pir-pending-table .qualidade-pir-pendente-row {
grid-template-columns: 72px minmax(0, 1fr) auto !important;
grid-template-areas:
"check check check"
"photo code action"
"photo description action"
"alerts alerts alerts"
"lot nfe quantity"
"obs obs obs"
"created created created";
gap: 0 10px;
padding: 10px !important;
background: #fff !important;
border-left: 4px solid #21a88c !important;
box-shadow: 0 2px 8px rgba(15, 35, 60, .07);
}
#qualidadeFabricaPane .pir-pending-table .qualidade-pir-pendente-row > td::before { margin-bottom: 2px; color: #708198; }
#qualidadeFabricaPane .pir-cell-check { grid-area: check; padding: 0 0 8px !important; }
#qualidadeFabricaPane .pir-cell-photo { grid-area: photo; width: auto; padding: 0 !important; }
#qualidadeFabricaPane .pir-product-photo { width: 70px; height: 70px; }
#qualidadeFabricaPane .pir-cell-code { grid-area: code !important; padding-top: 2px !important; font-size: 15px !important; }
#qualidadeFabricaPane .pir-cell-description { grid-area: description !important; padding-top: 1px !important; }
#qualidadeFabricaPane .pir-cell-alerts { grid-area: alerts !important; padding: 8px 0 5px !important; border-top: 1px solid #e4eaf1 !important; }
#qualidadeFabricaPane .pir-cell-lot { grid-area: lot !important; }
#qualidadeFabricaPane .pir-cell-nfe { grid-area: nfe !important; }
#qualidadeFabricaPane .pir-cell-obs { grid-area: obs !important; }
#qualidadeFabricaPane .pir-cell-quantity { grid-area: quantity !important; }
#qualidadeFabricaPane .pir-cell-created { grid-area: created !important; padding-bottom: 0 !important; }
#qualidadeFabricaPane .pir-cell-action { grid-area: action; align-self: center; padding: 0 !important; }
#qualidadeFabricaPane .pir-inspect-btn { min-height: 44px; }
}
@media (max-width: 640px) {
#qualidadeFabricaPane .content-wrapper { padding: 0 0 calc(76px + env(safe-area-inset-bottom)) 48px !important; }
#qualidadeFabricaPane .content-section { border: 0; border-radius: 0; box-shadow: none; }
#qualidadeFabricaPane .pir-page-heading { min-height: 56px; padding: 9px 10px; }
#qualidadeFabricaPane .pir-page-heading .content-section-title { font-size: 16px; }
#qualidadeFabricaPane .pir-page-subtitle { display: none; }
#qualidadeFabricaPane #qualidadeAcoesRapidas.pir-action-toolbar { grid-template-columns: minmax(0, 1fr) auto !important; padding: 8px 10px; }
#qualidadeFabricaPane .pir-action-primary > #qualidadeNovoRegistroBtn { grid-column: auto; }
#qualidadeFabricaPane .pir-action-primary > label,
#qualidadeFabricaPane .pir-action-primary > #qualidadePirSemMpBtn,
#qualidadeFabricaPane .pir-action-primary > #qualidadePirRefreshBtn { display: none !important; }
#qualidadeFabricaPane .pir-action-more[open] { grid-column: 1 / -1; }
#qualidadeFabricaPane #qualidadePirPendentesWrap { padding: 8px; }
#qualidadeFabricaPane .pir-pending-header { padding: 10px; }
#qualidadeFabricaPane .pir-pending-header > div:first-child { font-size: 13px; }
#qualidadeFabricaPane .pir-alert-legend { grid-template-columns: 1fr 1fr !important; padding: 0 10px 9px; font-size: 10px !important; }
#qualidadeFabricaPane .pir-pending-table tbody { padding: 0; background: transparent; }
#qualidadeFabricaPane .pir-pending-table .qualidade-pir-pendente-row {
grid-template-columns: 64px minmax(0, 1fr) !important;
grid-template-areas:
"check check"
"photo code"
"photo description"
"quantity quantity"
"alerts alerts"
"lot nfe"
"obs obs"
"created created"
"action action";
margin-bottom: 8px;
padding: 10px !important;
}
#qualidadeFabricaPane .pir-product-photo { width: 62px; height: 62px; }
#qualidadeFabricaPane .pir-cell-quantity {
display: flex !important;
align-items: baseline;
justify-content: space-between;
margin-top: 7px;
padding: 7px 0 !important;
color: #0b6555;
border-top: 1px solid #e4eaf1 !important;
border-bottom: 1px solid #e4eaf1 !important;
font-size: 15px;
font-weight: 900;
}
#qualidadeFabricaPane .pir-cell-quantity::before { margin: 0 !important; }
#qualidadeFabricaPane .pir-cell-alerts { border-top: 0 !important; }
#qualidadeFabricaPane .pir-cell-action { width: 100%; padding-top: 8px !important; }
#qualidadeFabricaPane .pir-inspect-btn { width: 100%; min-height: 44px; font-size: 13px; }
}
/* Ajuste final PIR mobile/tablet: a lista cresce no fluxo e a rolagem fica na página. */
@media (max-width: 900px) {
#qualidadeFabricaPane {
min-width: 0;
min-height: 0;
overflow: hidden;
}
#qualidadeFabricaPane > .content-wrapper {
width: 100%;
height: 100%;
min-height: 0;
overflow-x: hidden !important;
overflow-y: auto !important;
overscroll-behavior-y: contain;
-webkit-overflow-scrolling: touch;
}
#qualidadeFabricaPane .content-section,
#qualidadeFabricaPane #qualidadePirPendentesWrap,
#qualidadeFabricaPane .pir-pending-panel,
#qualidadeFabricaPane .pir-pending-list {
min-height: 0;
overflow: visible !important;
}
#qualidadeFabricaPane .content-section {
flex: 0 0 auto;
}
#qualidadeFabricaPane .pir-pending-list {
max-height: none !important;
}
}
@media (max-width: 640px) {
#qualidadeFabricaPane > .content-wrapper {
padding-bottom: calc(110px + env(safe-area-inset-bottom)) !important;
scroll-padding-bottom: calc(110px + env(safe-area-inset-bottom));
}
#qualidadeFabricaPane .pir-alert-legend {
display: none !important;
}
#qualidadeFabricaPane .pir-pending-header {
gap: 7px !important;
}
#qualidadeFabricaPane .pir-pending-table .qualidade-pir-pendente-row {
width: 100%;
box-sizing: border-box;
}
}
/* Override final: o modal PIR permanece claro e compacto em qualquer tema. */
#qualidadeInspecaoModal .modal-container { background: #f4f7fa !important; color: #172033 !important; }
#qualidadeInspecaoModal #qualidadeInspecaoForm { background: #eef3f7 !important; color: #172033 !important; }
#qualidadeInspecaoModal #qualidadeCarretelImagemPlaceholder,
#qualidadeInspecaoModal .qualidade-pir-carretel-wrap,
#qualidadeInspecaoModal .qualidade-pir-galeria { background: #fff !important; color: #172033 !important; }
#qualidadeInspecaoModal .qualidade-pir-card {
overflow: hidden;
border: 1px solid #d2dce8 !important;
border-radius: 11px !important;
background: #fff !important;
}
#qualidadeInspecaoModal .qualidade-pir-img-wrap { background: #f7f9fb !important; }
#qualidadeInspecaoModal .qualidade-pir-oque-box {
min-height: 58px;
border: 0 !important;
border-top: 1px solid #e1e7ee !important;
border-radius: 0 !important;
background: #fff !important;
color: #172033 !important;
}
#qualidadeInspecaoModal .qualidade-pir-oque-title { color: #607086 !important; }
#qualidadeInspecaoModal .qualidade-pir-oque-text { color: #172033 !important; }
@media (max-width: 760px) {
#qualidadeInspecaoModal .modal-container { height: 100dvh !important; max-height: 100dvh !important; }
#qualidadeInspecaoModal #qualidadeInspecaoForm { max-height: calc(100dvh - 54px) !important; padding: 10px !important; }
#qualidadeInspecaoModal .qualidade-inspecao-top {
display: grid !important;
grid-template-columns: 86px minmax(0, 1fr) !important;
gap: 10px !important;
}
#qualidadeInspecaoModal .qualidade-inspecao-top > .form-field:first-child { grid-column: 1 !important; }
#qualidadeInspecaoModal .qualidade-imagem-box { width: 86px !important; height: 86px !important; min-height: 86px !important; }
#qualidadeInspecaoModal .qualidade-imagem-box img { height: 76px !important; max-height: 76px !important; }
#qualidadeInspecaoModal .qualidade-inspecao-campos {
grid-column: 2 !important;
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 8px !important;
}
#qualidadeInspecaoModal .qualidade-inspecao-acoes-produto {
grid-column: 1 / -1 !important;
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 6px !important;
}
#qualidadeInspecaoModal #qualidadeAbrirDadosProdutoBtn { grid-column: 1 / -1 !important; }
#qualidadeInspecaoModal .qualidade-inspecao-campos > div:nth-child(2) { display: none !important; }
#qualidadeInspecaoModal .qualidade-inspecao-campos > .form-field { grid-column: 1 / -1 !important; }
#qualidadeInspecaoModal .qualidade-inspecao-campos > .form-field:nth-last-of-type(-n+2) { grid-column: span 1 !important; }
#qualidadeInspecaoModal #qualidadeCarretelImagemPlaceholder .qualidade-pir-galeria { grid-template-columns: 1fr !important; }
#qualidadeInspecaoModal #qualidadeCarretelImagemPlaceholder .qualidade-pir-img,
#qualidadeInspecaoModal #qualidadeCarretelImagemPlaceholder .qualidade-pir-img-wrap {
min-height: 150px !important;
max-height: 210px !important;
}
#qualidadeInspecaoModal #qualidadeInspecaoAcoes {
display: grid !important;
grid-template-columns: 1fr 1.35fr !important;
position: sticky !important;
bottom: -10px !important;
}
}
@media (max-width: 900px) {
#confZplEditorModal .conf-zpl-editor-grid {
grid-template-columns: 1fr !important;
}
#confZplEditorModal .conf-zpl-settings-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (max-width: 480px) {
#confZplEditorModal {
padding: 6px !important;
}
#confZplEditorModal .conf-zpl-settings-grid {
grid-template-columns: 1fr 1fr !important;
}
#confZplTesteImpressora,
#confZplBtnTeste {
width: 100%;
min-width: 0 !important;
}
}
/* ===== Configurador do agente de impressao ===== */
#confAgentePane {
--conf-agent-surface: rgba(15, 23, 42, 0.66);
--conf-agent-surface-strong: rgba(15, 23, 42, 0.9);
--conf-agent-card: rgba(30, 41, 59, 0.78);
--conf-agent-border: rgba(148, 163, 184, 0.24);
--conf-agent-text: #f8fafc;
--conf-agent-muted: #a8b4c6;
}
.light-mode #confAgentePane {
--conf-agent-surface: #f4f7fb;
--conf-agent-surface-strong: #ffffff;
--conf-agent-card: #ffffff;
--conf-agent-border: #d9e2ee;
--conf-agent-text: #172033;
--conf-agent-muted: #66758a;
}
#confAgentePane .conf-agent-page {
display: grid;
gap: 16px;
padding-top: 16px;
}
#confAgentePane .conf-agent-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 16px 18px;
border: 1px solid var(--conf-agent-border);
border-radius: 8px;
background: var(--conf-agent-surface-strong);
}
#confAgentePane .conf-agent-heading,
#confAgentePane .conf-agent-header-actions,
#confAgentePane .conf-agent-action,
#confAgentePane .conf-layout-card-top,
#confAgentePane .conf-layout-card-actions,
#confAgentePane .conf-layout-group-title,
#confAgentePane .conf-layout-presets > summary {
display: flex;
align-items: center;
}
#confAgentePane .conf-agent-heading { gap: 12px; min-width: 0; }
#confAgentePane .conf-agent-heading-icon {
display: grid;
width: 42px;
height: 42px;
flex: 0 0 42px;
place-items: center;
border-radius: 8px;
background: #172554;
color: #7dd3fc;
font-size: 18px;
}
#confAgentePane .conf-agent-eyebrow,
#confAgentePane .conf-agent-section-kicker {
display: block;
color: #14b8a6;
font-size: 10px;
font-weight: 800;
letter-spacing: .08em;
}
#confAgentePane .conf-agent-heading h3,
#confAgentePane .conf-agent-section-header h4 {
margin: 2px 0 0;
color: var(--conf-agent-text);
}
#confAgentePane .conf-agent-heading h3 { font-size: 19px; }
#confAgentePane .conf-agent-heading p,
#confAgentePane .conf-agent-section-header p {
margin: 3px 0 0;
color: var(--conf-agent-muted);
font-size: 12px;
line-height: 1.45;
}
#confAgentePane .conf-agent-header-actions { gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
#confAgentePane .conf-agent-action,
#confAgentePane .conf-agent-icon-button {
min-height: 40px;
border: 1px solid transparent;
border-radius: 8px;
font: inherit;
font-size: 12px;
font-weight: 700;
cursor: pointer;
transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}
#confAgentePane .conf-agent-action { justify-content: center; gap: 8px; padding: 8px 12px; }
#confAgentePane .conf-agent-action-primary { background: #2563eb; color: #fff; }
#confAgentePane .conf-agent-action-secondary { border-color: var(--conf-agent-border); background: transparent; color: var(--conf-agent-text); }
#confAgentePane .conf-agent-action-warning { background: #b45309; color: #fff; }
#confAgentePane .conf-agent-action-success { background: #0f766e; color: #fff; }
#confAgentePane .conf-agent-action:hover,
#confAgentePane .conf-agent-icon-button:hover { filter: brightness(1.08); }
#confAgentePane .conf-agent-action:focus-visible,
#confAgentePane .conf-agent-icon-button:focus-visible,
#confAgentePane .conf-layout-action:focus-visible { outline: 3px solid rgba(56, 189, 248, .35); outline-offset: 2px; }
#confAgentePane .conf-agent-stats {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}
#confAgentePane .conf-agent-stat {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
padding: 11px 12px;
border: 1px solid var(--conf-agent-border);
border-radius: 8px;
background: var(--conf-agent-card);
}
#confAgentePane .conf-agent-stat-icon {
display: grid;
width: 34px;
height: 34px;
flex: 0 0 34px;
place-items: center;
border-radius: 7px;
}
#confAgentePane .conf-agent-stat-icon.is-blue { background: #dbeafe; color: #1d4ed8; }
#confAgentePane .conf-agent-stat-icon.is-green { background: #dcfce7; color: #15803d; }
#confAgentePane .conf-agent-stat-icon.is-violet { background: #ede9fe; color: #6d28d9; }
#confAgentePane .conf-agent-stat-icon.is-cyan { background: #cffafe; color: #0e7490; }
#confAgentePane .conf-agent-stat strong { display: block; color: var(--conf-agent-text); font-size: 20px; line-height: 1; font-variant-numeric: tabular-nums; }
#confAgentePane .conf-agent-stat span { color: var(--conf-agent-muted); font-size: 11px; }
#confAgentePane .conf-agent-layout { display: grid; gap: 16px; }
#confAgentePane .conf-agent-panel {
padding: 16px;
border: 1px solid var(--conf-agent-border);
border-radius: 8px;
background: var(--conf-agent-surface);
}
#confAgentePane .conf-agent-section-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 14px;
}
#confAgentePane .conf-agent-section-header h4 { font-size: 16px; }
#confAgentePane .conf-agent-icon-button {
display: grid;
width: 40px;
padding: 0;
place-items: center;
border-color: var(--conf-agent-border);
background: var(--conf-agent-card);
color: var(--conf-agent-text);
}
#confAgentePane .conf-agent-loading,
#confAgentePane .conf-agent-empty {
display: grid;
justify-items: center;
gap: 7px;
padding: 22px;
border: 1px dashed var(--conf-agent-border);
border-radius: 8px;
color: var(--conf-agent-muted);
text-align: center;
font-size: 12px;
}
#confAgentePane .conf-agent-empty i { font-size: 18px; color: #8b5cf6; }
#confAgentePane .conf-agent-empty strong { color: var(--conf-agent-text); font-size: 13px; }
#confAgentePane .conf-agent-layout-list,
#confAgentePane .conf-agent-config-list { display: grid; gap: 14px; }
#confAgentePane .conf-layout-group { display: grid; gap: 8px; }
#confAgentePane .conf-layout-group + .conf-layout-group { padding-top: 4px; }
#confAgentePane .conf-layout-group-title { justify-content: space-between; gap: 10px; }
#confAgentePane .conf-layout-group-title strong { color: var(--conf-agent-text); font-size: 12px; }
#confAgentePane .conf-layout-group-title span {
padding: 2px 7px;
border-radius: 999px;
background: rgba(20, 184, 166, .14);
color: #0f9f91;
font-size: 10px;
font-weight: 700;
}
#confAgentePane .conf-layout-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
gap: 9px;
}
#confAgentePane .conf-layout-card {
display: grid;
grid-template-rows: auto 1fr auto;
min-width: 0;
overflow: hidden;
border: 1px solid var(--conf-agent-border);
border-radius: 8px;
background: var(--conf-agent-card);
}
#confAgentePane .conf-layout-card.is-profile { border-top: 3px solid #14b8a6; }
#confAgentePane .conf-layout-card.is-preset { border-top: 3px solid #64748b; }
#confAgentePane .conf-layout-card-top { justify-content: space-between; gap: 8px; padding: 9px 10px 0; }
#confAgentePane .conf-layout-kind,
#confAgentePane .conf-layout-size,
#confAgentePane .conf-layout-meta span {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 10px;
font-weight: 700;
}
#confAgentePane .conf-layout-kind { padding: 3px 7px; border-radius: 999px; }
#confAgentePane .conf-layout-kind.is-profile { background: rgba(20, 184, 166, .14); color: #0f9f91; }
#confAgentePane .conf-layout-kind.is-preset { background: rgba(100, 116, 139, .16); color: var(--conf-agent-muted); }
#confAgentePane .conf-layout-size { color: var(--conf-agent-muted); font-variant-numeric: tabular-nums; }
#confAgentePane .conf-layout-card-body { min-width: 0; padding: 10px; }
#confAgentePane .conf-layout-card-body h5 {
overflow: hidden;
margin: 0;
color: var(--conf-agent-text);
font-size: 13px;
line-height: 1.35;
text-overflow: ellipsis;
white-space: nowrap;
}
#confAgentePane .conf-layout-card-body p { margin: 3px 0 9px; color: var(--conf-agent-muted); font-size: 11px; }
#confAgentePane .conf-layout-meta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
#confAgentePane .conf-layout-meta span { color: var(--conf-agent-muted); font-weight: 600; }
#confAgentePane .conf-layout-meta .is-ready { color: #16a34a; }
#confAgentePane .conf-layout-meta .is-pending { color: #b45309; }
#confAgentePane .conf-layout-card-actions { gap: 4px; padding: 7px; border-top: 1px solid var(--conf-agent-border); }
#confAgentePane .conf-layout-action {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-width: 36px;
min-height: 34px;
padding: 5px 8px;
border: 0;
border-radius: 6px;
background: transparent;
color: var(--conf-agent-muted);
font: inherit;
font-size: 11px;
font-weight: 700;
cursor: pointer;
}
#confAgentePane .conf-layout-action:hover { background: rgba(59, 130, 246, .12); color: #3b82f6; }
#confAgentePane .conf-layout-action.is-danger { margin-left: auto; color: #dc2626; }
#confAgentePane .conf-layout-action.is-danger:hover { background: rgba(220, 38, 38, .1); }
#confAgentePane .conf-layout-presets { border-top: 1px solid var(--conf-agent-border); padding-top: 12px; }
#confAgentePane .conf-layout-presets > summary {
justify-content: space-between;
min-height: 40px;
padding: 0 10px;
border-radius: 7px;
color: var(--conf-agent-text);
cursor: pointer;
font-size: 12px;
font-weight: 700;
list-style: none;
}
#confAgentePane .conf-layout-presets > summary::-webkit-details-marker { display: none; }
#confAgentePane .conf-layout-presets > summary:hover { background: rgba(148, 163, 184, .09); }
#confAgentePane .conf-layout-presets > summary span { display: inline-flex; align-items: center; gap: 7px; }
#confAgentePane .conf-layout-presets > summary strong { padding: 2px 8px; border-radius: 999px; background: rgba(100, 116, 139, .16); font-size: 10px; }
#confAgentePane .conf-layout-presets[open] > summary { margin-bottom: 8px; }
@media (max-width: 900px) {
#confAgentePane .conf-agent-header { align-items: flex-start; flex-direction: column; }
#confAgentePane .conf-agent-header-actions { width: 100%; justify-content: flex-start; }
#confAgentePane .conf-agent-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
#confAgentePane .conf-agent-page { gap: 10px; padding: 8px 8px calc(80px + env(safe-area-inset-bottom)); }
#confAgentePane .conf-agent-header,
#confAgentePane .conf-agent-panel { padding: 12px; }
#confAgentePane .conf-agent-heading p { display: none; }
#confAgentePane .conf-agent-heading h3 { font-size: 17px; }
#confAgentePane .conf-agent-header-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
#confAgentePane .conf-agent-action { min-width: 0; min-height: 44px; padding: 7px; }
#confAgentePane .conf-agent-header-actions .conf-agent-action span { display: none; }
#confAgentePane .conf-agent-header-actions .conf-agent-action i { font-size: 16px; }
#confAgentePane .conf-agent-stats { gap: 7px; }
#confAgentePane .conf-agent-stat { padding: 9px; }
#confAgentePane .conf-agent-stat-icon { display: none; }
#confAgentePane .conf-agent-stat strong { font-size: 18px; }
#confAgentePane .conf-agent-stat span { line-height: 1.25; }
#confAgentePane .conf-agent-section-header { align-items: flex-start; }
#confAgentePane .conf-agent-section-header p { display: none; }
#confAgentePane .conf-agent-panel-library .conf-agent-section-header { align-items: center; }
#confAgentePane .conf-agent-panel-library .conf-agent-action span { display: inline; }
#confAgentePane .conf-layout-grid { grid-template-columns: 1fr; }
#confAgentePane .conf-layout-action { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
#confAgentePane .conf-agent-action,
#confAgentePane .conf-agent-icon-button { transition: none; }
}
/* Card "Solicitação" no fim da Lista de produtos (após filtro de busca) */
#listaProdutosGrid .lista-solicitacao-compra-card:hover {
box-shadow: 0 6px 18px rgba(245, 158, 11, 0.28);
transform: translateY(-2px);
border-color: #d97706;
}
:root:not(.light-mode) #listaProdutosGrid .lista-solicitacao-compra-card {
background: linear-gradient(180deg, #422006 0%, #1f2937 55%) !important;
border-color: #f59e0b !important;
}
:root:not(.light-mode) #listaProdutosGrid .lista-solicitacao-compra-card > div:first-child {
background: #451a03 !important;
border-bottom-color: #f59e0b !important;
}
:root:not(.light-mode) #listaProdutosList .lista-solicitacao-compra-item {
background: #422006 !important;
border-color: #f59e0b !important;
}
/* Oscilação — rolagem da página e da lista do degrau (app tem overflow:hidden) */
#armazemContent.tab-pane {
overflow: hidden;
}
#armazemContent > .armazem-page {
flex: 1 1 auto;
min-height: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
#conteudo-oscilacao-estoque > .content-wrapper {
height: auto;
min-height: 0;
overflow: visible;
padding-bottom: 48px;
}
.osci-degrau-table-wrap,
#osciDegrauTableWrap {
max-height: min(42vh, 420px);
overflow-y: auto !important;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border: 1px solid #1e293b;
border-radius: 10px;
scrollbar-gutter: stable;
scrollbar-width: thin;
scrollbar-color: #64748b #0f172a;
}
#osciDegrauTableWrap::-webkit-scrollbar {
width: 10px;
height: 10px;
}
#osciDegrauTableWrap::-webkit-scrollbar-track {
background: #0f172a;
border-radius: 8px;
}
#osciDegrauTableWrap::-webkit-scrollbar-thumb {
background: #64748b;
border-radius: 8px;
}
#osciDegrauTableWrap::-webkit-scrollbar-thumb:hover {
background: #94a3b8;
}
/* Produção — Gemba */
#producaoGembaPane .gemba-page-heading, #qualidadeAreaVermelhaPane .gemba-page-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
#producaoGembaPane .gemba-page-subtitle, #qualidadeAreaVermelhaPane .gemba-page-subtitle {
color: var(--inactive-color);
font-size: 13px;
margin-top: 4px;
}
#producaoGembaPane .gemba-heading-actions, #qualidadeAreaVermelhaPane .gemba-heading-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
#gembaRefreshBtn {
display: inline-flex;
align-items: center;
gap: 8px;
background: #334155;
color: #fff;
}
#gembaAddBtn {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
color: #fff;
}
#producaoGembaPane .gemba-modos-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin: 12px 0 0;
}
#producaoGembaPane .gemba-modos {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0;
flex: 1 1 auto;
}
#producaoGembaPane .gemba-guias-config-btn {
width: 38px;
height: 38px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
border: 1px solid var(--border-color, #374151);
background: rgba(255,255,255,.06);
color: #cbd5e1;
cursor: pointer;
line-height: 1;
}
#producaoGembaPane .gemba-guias-config-btn i {
margin: 0;
width: 1em;
text-align: center;
}
#producaoGembaPane .gemba-guias-config-btn[hidden] { display: none !important; }
#gembaGuiasModal .gemba-guias-lista {
display: flex;
flex-direction: column;
gap: 8px;
margin: 12px 0;
}
#gembaGuiasModal .gemba-guias-item {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
padding: 8px;
border: 1px solid rgba(255,255,255,.1);
border-radius: 10px;
}
#gembaGuiasModal .gemba-guias-ord {
display: flex;
flex-direction: column;
gap: 2px;
}
#gembaGuiasModal .gemba-guias-ord button,
#gembaGuiasModal [data-gemba-guia-del] {
border: 0;
background: rgba(255,255,255,.08);
color: #e5e7eb;
width: 28px;
height: 22px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 6px;
cursor: pointer;
line-height: 1;
}
#gembaGuiasModal .gemba-guias-ord button i,
#gembaGuiasModal [data-gemba-guia-del] i {
margin: 0;
width: 1em;
text-align: center;
}
#gembaGuiasModal .gemba-guias-item input[type="text"] {
flex: 1 1 160px;
min-width: 140px;
padding: 6px 8px;
border-radius: 8px;
border: 1px solid rgba(255,255,255,.12);
background: #0f172a;
color: #e5e7eb;
}
#gembaGuiasModal .gemba-guias-tipo {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: #cbd5e1;
}
#gembaGuiasModal .gemba-guias-tipo input[type="checkbox"] {
width: 16px;
height: 16px;
flex: 0 0 16px;
}
#gembaGuiasModal .gemba-guias-fixa {
font-size: 11px;
color: #94a3b8;
}
#gembaGuiasModal .gemba-guias-add {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 12px;
}
#gembaGuiasModal .gemba-guias-add input:not([type="checkbox"]):not([type="radio"]) {
flex: 1 1 180px;
padding: 8px 10px;
border-radius: 8px;
border: 1px solid rgba(255,255,255,.12);
background: #0f172a;
color: #e5e7eb;
}
#producaoGembaPane .gemba-modo {
border: 1px solid var(--border-color, #374151);
background: rgba(255,255,255,.04);
color: var(--content-color, #e5e7eb);
border-radius: 10px;
padding: 8px 18px;
font-size: 13px;
font-weight: 700;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
}
#producaoGembaPane .gemba-modo span {
background: rgba(255,255,255,.08);
border-radius: 999px;
padding: 0 7px;
font-weight: 700;
font-size: 12px;
}
#producaoGembaPane .gemba-modo.is-active {
background: rgba(14,165,233,.18);
border-color: #0284c7;
color: #7dd3fc;
}
html.light-mode #producaoGembaPane .gemba-modo {
background: #fff;
}
html.light-mode #producaoGembaPane .gemba-modo.is-active {
background: #e0f2fe;
color: #0369a1;
}
#producaoGembaPane.is-prio-board .gemba-toolbar,
#producaoGembaPane .gemba-toolbar[hidden] {
display: none !important;
}
#producaoGembaPane .gemba-toolbar, #qualidadeAreaVermelhaPane .gemba-toolbar {
display: flex;
flex-direction: column;
gap: 12px;
margin: 16px 0 14px;
}
#gembaBusca,
#qualidadeAreaVermelhaBusca {
width: 100%;
max-width: 520px;
padding: 9px 12px;
border: 1px solid var(--border-color, #374151);
border-radius: 8px;
background: var(--content-bg, #111827);
color: var(--content-color, #e5e7eb);
}
#producaoGembaPane .gemba-filtros-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
}
#producaoGembaPane .gemba-filtros, #qualidadeAreaVermelhaPane .gemba-filtros, #montaProducaoPane .gemba-filtros, #estoqueMaquinasPane .gemba-filtros {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
#producaoGembaPane .gemba-ver-todos {
border: 1px dashed var(--border-color, #64748b);
background: rgba(255,255,255,.04);
color: var(--content-color, #e5e7eb);
border-radius: 999px;
padding: 6px 12px;
font-size: 12px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
#producaoGembaPane .gemba-ver-todos.is-active {
background: rgba(14,165,233,.16);
border-style: solid;
border-color: #0284c7;
color: #7dd3fc;
}
#producaoGembaPane .gemba-filtro, #qualidadeAreaVermelhaPane .gemba-filtro, #montaProducaoPane .gemba-filtro, #estoqueMaquinasPane .gemba-filtro {
border: 1px solid var(--border-color, #374151);
background: rgba(255,255,255,.04);
color: var(--content-color, #e5e7eb);
border-radius: 999px;
padding: 6px 12px;
font-size: 12px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
}
#producaoGembaPane .gemba-filtro span, #qualidadeAreaVermelhaPane .gemba-filtro span, #montaProducaoPane .gemba-filtro span, #estoqueMaquinasPane .gemba-filtro span {
background: rgba(255,255,255,.08);
border-radius: 999px;
padding: 0 7px;
font-weight: 700;
}
#producaoGembaPane .gemba-filtro.is-active, #qualidadeAreaVermelhaPane .gemba-filtro.is-active, #montaProducaoPane .gemba-filtro.is-active, #estoqueMaquinasPane .gemba-filtro.is-active {
background: rgba(14,165,233,.16);
border-color: #0284c7;
color: #7dd3fc;
}
#producaoGembaPane #gembaFiltrosStatus .gemba-filtro {
position: relative;
overflow: hidden;
}
#producaoGembaPane #gembaFiltrosStatus .gemba-filtro::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 16px 16px 0;
border-color: transparent #64748b transparent transparent;
pointer-events: none;
}
#producaoGembaPane #gembaFiltrosStatus .gemba-filtro[data-status="minhas"]::after,
#producaoGembaPane #gembaFiltrosStatus .gemba-filtro[data-status="aberta"]::after {
border-right-color: #ef4444;
}
#producaoGembaPane #gembaFiltrosStatus .gemba-filtro[data-status="em_andamento"]::after {
border-right-color: #f59e0b;
}
#producaoGembaPane #gembaFiltrosStatus .gemba-filtro[data-status="resolvida"]::after {
border-right-color: #22c55e;
}
#producaoGembaPane #gembaFiltrosStatus .gemba-filtro[data-status="cancelada"]::after {
border-right-color: #94a3b8;
}
#producaoGembaPane .gemba-status-msg, #qualidadeAreaVermelhaPane .gemba-status-msg {
margin-bottom: 10px;
font-size: 13px;
color: #94a3b8;
}
#producaoGembaPane .gemba-status-msg.is-erro, #qualidadeAreaVermelhaPane .gemba-status-msg.is-erro { color: #f87171; }
#producaoGembaPane .gemba-cards, #qualidadeAreaVermelhaPane .gemba-cards, #montaProducaoPane .gemba-cards, #estoqueMaquinasPane .gemba-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 14px;
padding: 6px 0 20px;
}
#producaoGembaPane .gemba-empty, #qualidadeAreaVermelhaPane .gemba-empty, #montaProducaoPane .gemba-empty, #estoqueMaquinasPane .gemba-empty {
grid-column: 1 / -1;
text-align: center;
padding: 36px 16px;
color: var(--inactive-color);
}
#producaoGembaPane.is-prio-board #gembaCardsContainer.gemba-cards {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
gap: 20px;
}
#producaoGembaPane .gemba-prio-grupo {
grid-column: unset;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
flex: 0 0 280px;
width: min(100%, 320px);
margin-bottom: 8px;
}
#producaoGembaPane .gemba-prio-user {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
#producaoGembaPane .gemba-prio-foto {
width: 64px;
height: 64px;
border-radius: 50%;
overflow: hidden;
background: rgba(123,104,238,.25);
border: 2px solid #7b68ee;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
color: #ddd6fe;
}
#producaoGembaPane .gemba-prio-foto img {
width: 100%;
height: 100%;
object-fit: cover;
}
#producaoGembaPane .gemba-prio-user strong {
font-size: 15px;
}
#producaoGembaPane .gemba-prio-grupo .gemba-cards {
display: flex;
flex-direction: column;
width: 100%;
padding-top: 0;
gap: 10px;
}
#producaoGembaPane .gemba-filtros[hidden] {
display: none !important;
}
#producaoGembaPane.is-ata-board #gembaCardsContainer.gemba-cards {
display: flex;
flex-direction: column;
gap: 18px;
}
#producaoGembaPane .gemba-ata-tema {
background: var(--theme-hover, rgba(123,104,238,.08));
border: 1px solid var(--border-color, #374151);
border-radius: 12px;
padding: 14px 16px 10px;
}
#producaoGembaPane .gemba-ata-tema-tit {
margin: 0 0 12px;
font-size: 15px;
font-weight: 800;
color: var(--content-title-color, #e5e7eb);
display: flex;
align-items: center;
gap: 8px;
justify-content: space-between;
}
#producaoGembaPane .gemba-ata-tema-tit > span {
display: inline-flex;
align-items: center;
gap: 8px;
min-width: 0;
}
#producaoGembaPane .gemba-ata-resumo-btn {
flex-shrink: 0;
border: 1px solid #7b68ee;
background: rgba(123,104,238,.18);
color: #ddd6fe;
border-radius: 8px;
padding: 4px 10px;
font-size: 12px;
font-weight: 700;
cursor: pointer;
}
#producaoGembaPane .gemba-ata-resumo-btn:hover {
background: rgba(123,104,238,.32);
}
.ata-resumo-overlay {
position: fixed;
inset: 0;
z-index: 13000;
background: rgba(0,0,0,.72);
display: flex;
align-items: flex-start;
justify-content: center;
padding: 28px 16px;
overflow-y: auto;
}
.ata-resumo-overlay[hidden] { display: none !important; }
.ata-resumo-card {
width: min(720px, 100%);
margin: auto;
background: #111827;
color: #e5e7eb;
border: 1px solid #334155;
border-radius: 14px;
padding: 16px 18px 20px;
box-shadow: 0 24px 70px rgba(0,0,0,.45);
}
.ata-resumo-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 12px;
}
.ata-resumo-head strong { font-size: 16px; }
#ataResumoFechar {
border: 0;
background: transparent;
color: #94a3b8;
font-size: 18px;
cursor: pointer;
}
.ata-resumo-status { margin: 0 0 10px; font-size: 13px; color: #fbbf24; }
.ata-resumo-status.is-erro { color: #f87171; }
.ata-resumo-corpo { font-size: 14px; line-height: 1.55; white-space: normal; }
#producaoGembaPane .gemba-ata-resp {
margin: 0 0 12px;
padding: 10px 12px;
background: var(--content-bg, #111827);
border-radius: 10px;
}
#producaoGembaPane .gemba-ata-resp-head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
#producaoGembaPane .gemba-ata-resp-head strong {
font-size: 13px;
}
#producaoGembaPane .gemba-ata-count {
min-width: 22px;
height: 22px;
padding: 0 7px;
border-radius: 999px;
background: #7b68ee;
color: #fff;
font-size: 12px;
font-weight: 800;
display: inline-flex;
align-items: center;
justify-content: center;
}
#producaoGembaPane .gemba-ata-lista {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
#producaoGembaPane .gemba-ata-item {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
}
#producaoGembaPane .gemba-ata-item label {
display: flex;
align-items: flex-start;
gap: 8px;
flex: 1;
cursor: pointer;
font-size: 13px;
line-height: 1.4;
}
#producaoGembaPane .gemba-ata-item label.is-bloqueado {
cursor: not-allowed;
opacity: .78;
}
#producaoGembaPane .gemba-ata-item input[type="checkbox"] {
width: 16px;
height: 16px;
margin-top: 2px;
accent-color: #7b68ee;
flex-shrink: 0;
}
#producaoGembaPane .gemba-ata-prazo {
font-size: 11px;
color: #93c5fd;
white-space: nowrap;
}
#gembaFormModal .gemba-modal-head-actions {
display: flex;
align-items: center;
gap: 8px;
}
#gembaFormModal .gemba-chatbot-btn {
border: 0;
background: rgba(123,104,238,.2);
color: #c4b5fd;
width: 34px;
height: 34px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
cursor: pointer;
line-height: 1;
}
#gembaFormModal .gemba-chatbot-btn[hidden] { display: none !important; }
#producaoGembaPane .gemba-card-grau, #qualidadeAreaVermelhaPane .gemba-card-grau {
font-size: 10px;
font-weight: 700;
border-radius: 6px;
padding: 2px 7px;
background: rgba(123,104,238,.22);
color: #c4b5fd;
}
/* Linha de produção — cards estilo Gemba (1 OP por card) */
#montaProducaoPane.monta-modo-operador #montaKanban {
display: none !important;
}
#montaProducaoPane .gemba-card {
background: var(--card-bg, #1e2535);
border: 1px solid var(--border-color, #374151);
border-radius: 12px;
overflow: hidden;
display: flex;
flex-direction: column;
cursor: pointer;
position: relative;
transition: box-shadow .2s, transform .2s;
}
#montaProducaoPane .gemba-card:hover {
box-shadow: 0 8px 24px rgba(0,0,0,.32);
transform: translateY(-1px);
}
#montaProducaoPane .gemba-card-corner {
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 26px 26px 0;
border-color: transparent #64748b transparent transparent;
}
#montaProducaoPane .gemba-card-corner[data-status="producao"] { border-right-color: #22c55e; }
#montaProducaoPane .gemba-card-corner[data-status="notificacao"] { border-right-color: #ef4444; }
#montaProducaoPane .gemba-card-corner[data-status="parada"] { border-right-color: #f97316; }
#montaProducaoPane .gemba-card-corner[data-status="ri"] { border-right-color: #3b82f6; }
#montaProducaoPane .gemba-card-corner[data-status="programado"] { border-right-color: #64748b; }
#montaProducaoPane .gemba-card-corner[data-status="aberta"] { border-right-color: #ef4444; }
#montaProducaoPane .gemba-card-corner[data-status="em_andamento"] { border-right-color: #f97316; }
#montaProducaoPane .gemba-card-corner[data-status="resolvida"] { border-right-color: #22c55e; }
#montaProducaoPane .monta-quina-legenda {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 14px;
margin-left: 4px;
}
#montaProducaoPane .monta-quina-legenda-item {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
color: #94a3b8;
white-space: nowrap;
cursor: pointer;
}
#montaProducaoPane .monta-quina-legenda-item[hidden] {
display: none !important;
}
#montaProducaoPane .monta-quina-legenda-item:hover,
#montaProducaoPane .monta-quina-legenda-item:focus-visible {
color: #e2e8f0;
outline: none;
}
#montaProducaoPane .monta-quina-legenda-corner {
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 0 12px 12px 0;
border-color: transparent #64748b transparent transparent;
flex-shrink: 0;
}
#montaProducaoPane .monta-quina-legenda-corner[data-status="producao"] { border-right-color: #22c55e; }
#montaProducaoPane .monta-quina-legenda-corner[data-status="ri"] { border-right-color: #3b82f6; }
#montaProducaoPane .monta-quina-legenda-corner[data-status="notificacao"] { border-right-color: #ef4444; }
#montaProducaoPane .monta-quina-legenda-corner[data-status="parada"] { border-right-color: #f97316; }
#montaProducaoPane .monta-quina-legenda-corner[data-status="programado"] { border-right-color: #64748b; }
.kanban-modal.acoes-grupo-modal {
position: relative;
overflow: hidden;
width: min(760px, 96vw);
}
.kanban-modal.acoes-grupo-modal > .gemba-card-corner,
.kanban-modal.acoes-grupo-modal > .acoes-grupo-corner {
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 28px 28px 0;
border-color: transparent #64748b transparent transparent;
z-index: 2;
pointer-events: none;
}
.kanban-modal.acoes-grupo-modal > .acoes-grupo-corner[data-status="producao"] { border-right-color: #22c55e; }
.kanban-modal.acoes-grupo-modal > .acoes-grupo-corner[data-status="notificacao"] { border-right-color: #ef4444; }
.kanban-modal.acoes-grupo-modal > .acoes-grupo-corner[data-status="parada"] { border-right-color: #f97316; }
.kanban-modal.acoes-grupo-modal > .acoes-grupo-corner[data-status="ri"] { border-right-color: #3b82f6; }
.kanban-modal.acoes-grupo-modal > .acoes-grupo-corner[data-status="programado"] { border-right-color: #64748b; }
.kanban-modal.acoes-grupo-modal .acoes-grupo-op-dados {
margin-top: 8px;
font-size: 12px;
line-height: 1.45;
color: #94a3b8;
}
.kanban-modal.acoes-grupo-modal .acoes-grupo-op-dados b {
color: #e2e8f0;
font-weight: 600;
}
.kanban-modal.acoes-grupo-modal header {
padding-right: 36px;
}
.kanban-modal.acoes-grupo-modal .acoes-grupo-acoes-label {
font-size: 12px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
color: #64748b;
}
.kanban-modal.acoes-grupo-modal .acoes-grupo-acoes-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin-top: 12px;
}
.kanban-modal.acoes-grupo-modal .acoes-grupo-acao-card {
padding: 14px 12px;
border-radius: 12px;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
text-align: left;
border: 1px solid #cbd5e1;
background: #f8fafc;
color: #334155;
}
.kanban-modal.acoes-grupo-modal .acoes-grupo-acao-card:hover {
transform: translateY(-1px);
box-shadow: 0 8px 18px rgba(15, 23, 42, .18);
}
.kanban-modal.acoes-grupo-modal .acoes-grupo-acao-card:disabled {
opacity: .45;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.kanban-modal.acoes-grupo-modal .acoes-grupo-acao-icon {
width: 42px;
height: 42px;
border-radius: 12px;
background: #475569;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
.kanban-modal.acoes-grupo-modal .acoes-grupo-acao-titulo {
font-size: 14px;
font-weight: 700;
line-height: 1.2;
}
.kanban-modal.acoes-grupo-modal .acoes-grupo-acao-desc {
font-size: 11px;
line-height: 1.35;
color: #64748b;
}
.kanban-modal.acoes-grupo-modal .acoes-grupo-acao-card[data-tom="verde"] {
background: linear-gradient(135deg,#ecfdf5,#d1fae5);
color: #065f46;
border-color: #a7f3d0;
}
.kanban-modal.acoes-grupo-modal .acoes-grupo-acao-card[data-tom="verde"] .acoes-grupo-acao-icon { background: #10b981; }
.kanban-modal.acoes-grupo-modal .acoes-grupo-acao-card[data-tom="verde"] .acoes-grupo-acao-desc { color: #047857; }
.kanban-modal.acoes-grupo-modal .acoes-grupo-acao-card[data-tom="azul"] {
background: linear-gradient(135deg,#eff6ff,#dbeafe);
color: #075985;
border-color: #93c5fd;
}
.kanban-modal.acoes-grupo-modal .acoes-grupo-acao-card[data-tom="azul"] .acoes-grupo-acao-icon { background: #0ea5e9; }
.kanban-modal.acoes-grupo-modal .acoes-grupo-acao-card[data-tom="azul"] .acoes-grupo-acao-desc { color: #0369a1; }
.kanban-modal.acoes-grupo-modal .acoes-grupo-acao-card[data-tom="ciano"] {
background: linear-gradient(135deg,#ecfeff,#cffafe);
color: #155e75;
border-color: #67e8f9;
}
.kanban-modal.acoes-grupo-modal .acoes-grupo-acao-card[data-tom="ciano"] .acoes-grupo-acao-icon { background: #0891b2; }
.kanban-modal.acoes-grupo-modal .acoes-grupo-acao-card[data-tom="ciano"] .acoes-grupo-acao-desc { color: #0e7490; }
.kanban-modal.acoes-grupo-modal .acoes-grupo-acao-card[data-tom="indigo"] {
background: linear-gradient(135deg,#eef2ff,#e0e7ff);
color: #3730a3;
border-color: #c7d2fe;
}
.kanban-modal.acoes-grupo-modal .acoes-grupo-acao-card[data-tom="indigo"] .acoes-grupo-acao-icon { background: #4f46e5; }
.kanban-modal.acoes-grupo-modal .acoes-grupo-acao-card[data-tom="indigo"] .acoes-grupo-acao-desc { color: #4338ca; }
.kanban-modal.acoes-grupo-modal .acoes-grupo-acao-card[data-tom="violeta"] {
background: linear-gradient(135deg,#f5f3ff,#ede9fe);
color: #6d28d9;
border-color: #d8b4fe;
}
.kanban-modal.acoes-grupo-modal .acoes-grupo-acao-card[data-tom="violeta"] .acoes-grupo-acao-icon { background: #7c3aed; }
.kanban-modal.acoes-grupo-modal .acoes-grupo-acao-card[data-tom="violeta"] .acoes-grupo-acao-desc { color: #7c3aed; }
.kanban-modal.acoes-grupo-modal .acoes-grupo-acao-card[data-tom="laranja"] {
background: linear-gradient(135deg,#fff7ed,#ffedd5);
color: #9a3412;
border-color: #fdba74;
}
.kanban-modal.acoes-grupo-modal .acoes-grupo-acao-card[data-tom="laranja"] .acoes-grupo-acao-icon { background: #f59e0b; }
.kanban-modal.acoes-grupo-modal .acoes-grupo-acao-card[data-tom="laranja"] .acoes-grupo-acao-desc { color: #c2410c; }
.kanban-modal.acoes-grupo-modal .acoes-grupo-acao-card[data-tom="vermelho"] {
background: linear-gradient(135deg,#fef2f2,#fee2e2);
color: #991b1b;
border-color: #fca5a5;
}
.kanban-modal.acoes-grupo-modal .acoes-grupo-acao-card[data-tom="vermelho"] .acoes-grupo-acao-icon { background: #ef4444; }
.kanban-modal.acoes-grupo-modal .acoes-grupo-acao-card[data-tom="vermelho"] .acoes-grupo-acao-desc { color: #b91c1c; }
.kanban-modal.acoes-grupo-modal .acoes-grupo-acao-card[data-tom="slate"] {
background: #f8fafc;
color: #334155;
border-color: #cbd5e1;
}
.kanban-modal.acoes-grupo-modal .acoes-grupo-acao-card[data-tom="slate"] .acoes-grupo-acao-icon { background: #475569; }
.kanban-modal.acoes-grupo-modal .acoes-grupo-acao-card[data-tom="slate"] .acoes-grupo-acao-desc { color: #64748b; }
@media (max-width: 700px) {
.kanban-modal.acoes-grupo-modal .acoes-grupo-acoes-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 420px) {
.kanban-modal.acoes-grupo-modal .acoes-grupo-acoes-grid {
grid-template-columns: 1fr;
}
}
#montaProducaoPane .gemba-card-head {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
padding: 10px 28px 8px 12px;
border-bottom: 1px solid var(--border-color, #374151);
}
#montaProducaoPane .gemba-card-id {
background: #0ea5e9;
color: #fff;
border-radius: 20px;
padding: 2px 8px;
font-size: 10px;
font-weight: 700;
}
#montaProducaoPane .gemba-card-date {
font-size: 10px;
color: var(--inactive-color);
}
#montaProducaoPane .gemba-card-dias {
font-size: 10px;
font-weight: 600;
border-radius: 6px;
padding: 2px 7px;
background: rgba(255,255,255,.07);
color: #fdba74;
}
#montaProducaoPane .gemba-card-status {
margin-left: auto;
font-size: 10px;
border-radius: 6px;
padding: 2px 7px;
background: rgba(255,255,255,.07);
color: #fcd34d;
}
#montaProducaoPane .gemba-card-status[data-status="producao"] { color: #86efac; }
#montaProducaoPane .gemba-card-status[data-status="notificacao"] { color: #fca5a5; }
#montaProducaoPane .gemba-card-status[data-status="parada"] { color: #fdba74; }
#montaProducaoPane .gemba-card-status[data-status="ri"] { color: #93c5fd; }
#montaProducaoPane .gemba-card-status[data-status="programado"] { color: #94a3b8; }
#montaProducaoPane .gemba-card-status[data-status="resolvida"] { color: #86efac; }
#montaProducaoPane .gemba-card-status[data-status="aberta"] { color: #fca5a5; }
#montaProducaoPane .gemba-card-body {
display: block;
padding: 10px 12px 14px;
min-height: auto;
}
#montaProducaoPane .gemba-card-text h3 {
margin: 0 0 6px;
font-size: 14px;
color: var(--content-title-color, #e5e7eb);
}
#montaProducaoPane .gemba-card-text p {
margin: 0;
font-size: 12px;
color: var(--inactive-color);
line-height: 1.45;
}
#producaoGembaPane .gemba-card, #qualidadeAreaVermelhaPane .gemba-card {
background: var(--card-bg, #1e2535);
border: 1px solid var(--border-color, #374151);
border-radius: 12px;
overflow: hidden;
display: flex;
flex-direction: column;
cursor: pointer;
position: relative;
transition: box-shadow .2s, transform .2s;
}
#producaoGembaPane .gemba-card:hover, #qualidadeAreaVermelhaPane .gemba-card:hover {
box-shadow: 0 8px 24px rgba(0,0,0,.32);
transform: translateY(-1px);
}
#producaoGembaPane .gemba-card-corner, #qualidadeAreaVermelhaPane .gemba-card-corner {
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 26px 26px 0;
border-color: transparent #64748b transparent transparent;
}
#producaoGembaPane .gemba-card-corner[data-status="aberta"], #qualidadeAreaVermelhaPane .gemba-card-corner[data-status="aberta"] { border-right-color: #ef4444; }
#producaoGembaPane .gemba-card-corner[data-status="em_andamento"], #qualidadeAreaVermelhaPane .gemba-card-corner[data-status="em_andamento"] { border-right-color: #f59e0b; }
#producaoGembaPane .gemba-card-corner[data-status="resolvida"], #qualidadeAreaVermelhaPane .gemba-card-corner[data-status="resolvida"] { border-right-color: #22c55e; }
#producaoGembaPane .gemba-card-corner[data-status="cancelada"], #qualidadeAreaVermelhaPane .gemba-card-corner[data-status="cancelada"] { border-right-color: #94a3b8; }
#producaoGembaPane .gemba-card-head, #qualidadeAreaVermelhaPane .gemba-card-head {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
padding: 10px 28px 8px 12px;
border-bottom: 1px solid var(--border-color, #374151);
}
#producaoGembaPane .gemba-card-id, #qualidadeAreaVermelhaPane .gemba-card-id {
background: #0ea5e9;
color: #fff;
border-radius: 20px;
padding: 2px 8px;
font-size: 10px;
font-weight: 700;
}
#producaoGembaPane .gemba-card-date, #qualidadeAreaVermelhaPane .gemba-card-date {
font-size: 10px;
color: var(--inactive-color);
}
#producaoGembaPane .gemba-card-dias, #qualidadeAreaVermelhaPane .gemba-card-dias {
font-size: 10px;
font-weight: 600;
border-radius: 6px;
padding: 2px 7px;
background: rgba(255,255,255,.07);
}
#producaoGembaPane .gemba-card-dias[data-tipo="aberto"], #qualidadeAreaVermelhaPane .gemba-card-dias[data-tipo="aberto"] { color: #7dd3fc; }
#producaoGembaPane .gemba-card-dias[data-tipo="prazo"], #qualidadeAreaVermelhaPane .gemba-card-dias[data-tipo="prazo"] { color: #fcd34d; }
#producaoGembaPane .gemba-card-dias[data-tipo="hoje"], #qualidadeAreaVermelhaPane .gemba-card-dias[data-tipo="hoje"] { color: #fdba74; }
#producaoGembaPane .gemba-card-dias[data-tipo="atraso"], #qualidadeAreaVermelhaPane .gemba-card-dias[data-tipo="atraso"] { color: #fca5a5; }
#producaoGembaPane .gemba-card-status, #qualidadeAreaVermelhaPane .gemba-card-status {
font-size: 10px;
border-radius: 6px;
padding: 2px 7px;
background: rgba(255,255,255,.07);
}
#producaoGembaPane .gemba-card-status[data-status="aberta"], #qualidadeAreaVermelhaPane .gemba-card-status[data-status="aberta"] { color: #fca5a5; }
#producaoGembaPane .gemba-card-status[data-status="em_andamento"], #qualidadeAreaVermelhaPane .gemba-card-status[data-status="em_andamento"] { color: #fcd34d; }
#producaoGembaPane .gemba-card-status[data-status="resolvida"], #qualidadeAreaVermelhaPane .gemba-card-status[data-status="resolvida"] { color: #86efac; }
#producaoGembaPane .gemba-card-video, #qualidadeAreaVermelhaPane .gemba-card-video {
margin-left: auto;
color: #38bdf8;
font-size: 12px;
}
#producaoGembaPane .gemba-card-body, #qualidadeAreaVermelhaPane .gemba-card-body {
display: grid;
grid-template-columns: 88px 1fr;
gap: 10px;
padding: 10px 12px;
min-height: 110px;
}
#producaoGembaPane .gemba-card-thumb, #qualidadeAreaVermelhaPane .gemba-card-thumb {
width: 88px;
height: 88px;
object-fit: cover;
border-radius: 8px;
background: #0f172a;
}
#producaoGembaPane .gemba-card-thumb.is-empty, #qualidadeAreaVermelhaPane .gemba-card-thumb.is-empty {
display: flex;
align-items: center;
justify-content: center;
color: #64748b;
}
#producaoGembaPane .gemba-card-text h3, #qualidadeAreaVermelhaPane .gemba-card-text h3 {
margin: 0 0 6px;
font-size: 14px;
color: var(--content-title-color, #e5e7eb);
}
#producaoGembaPane .gemba-card-pai {
display: block;
margin-bottom: 4px;
color: #7dd3fc;
font-size: 11px;
}
#producaoGembaPane .gemba-card-text p, #qualidadeAreaVermelhaPane .gemba-card-text p {
margin: 0;
font-size: 12px;
color: var(--inactive-color);
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
#producaoGembaPane .gemba-card-foot, #qualidadeAreaVermelhaPane .gemba-card-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 8px 12px 12px;
font-size: 12px;
color: var(--inactive-color);
flex-wrap: wrap;
}
#producaoGembaPane .gemba-card {
height: 100%;
}
#producaoGembaPane .gemba-card-body {
flex: 1 1 auto;
}
#producaoGembaPane .gemba-card-foot {
margin-top: auto;
}
#qualidadeAreaVermelhaPane .gemba-card-foot .av-card-analista-pendente {
color: #fbbf24;
}
#gembaFormModal, #producaoGembaPane .gemba-modal, #qualidadeAreaVermelhaPane .gemba-modal {
position: fixed;
inset: 0;
z-index: 12050;
background: rgba(0,0,0,.55);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
#gembaFormModal[hidden], #producaoGembaPane .gemba-modal[hidden], #qualidadeAreaVermelhaPane .gemba-modal[hidden] { display: none !important; }
#gembaFormModal .gemba-modal-card, #producaoGembaPane .gemba-modal-card, #qualidadeAreaVermelhaPane .gemba-modal-card {
width: min(720px, 100%);
max-height: calc(100vh - 40px);
overflow: auto;
background: #1e293b;
border: 1px solid rgba(255,255,255,.12);
border-radius: 12px;
box-shadow: 0 20px 50px rgba(0,0,0,.45);
}
#gembaFormModal .gemba-modal-head, #producaoGembaPane .gemba-modal-head, #qualidadeAreaVermelhaPane .gemba-modal-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 14px 16px;
border-bottom: 1px solid rgba(255,255,255,.08);
}
#gembaFormModal .gemba-modal-head > div, #producaoGembaPane .gemba-modal-head > div, #qualidadeAreaVermelhaPane .gemba-modal-head > div {
display: flex;
align-items: center;
gap: 8px;
color: #e5e7eb;
}
#gembaFormModalClose {
width: 34px;
height: 34px;
border-radius: 10px;
border: 1px solid #374151;
background: rgba(255,255,255,.04);
color: #e5e7eb;
cursor: pointer;
}
#gembaFormModal .gemba-modal-body, #producaoGembaPane .gemba-modal-body, #qualidadeAreaVermelhaPane .gemba-modal-body {
display: flex;
flex-direction: column;
gap: 12px;
padding: 16px;
}
#gembaFormModal .gemba-modal-autores, #producaoGembaPane .gemba-modal-autores {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 16px;
padding: 8px 10px;
border: 1px solid rgba(255,255,255,.08);
border-radius: 8px;
background: rgba(255,255,255,.03);
font-size: 12px;
color: var(--inactive-color, #94a3b8);
}
#gembaFormModal .gemba-modal-autores[hidden], #producaoGembaPane .gemba-modal-autores[hidden] { display: none !important; }
#gembaFormModal .gemba-modal-autores strong, #producaoGembaPane .gemba-modal-autores strong {
color: #e5e7eb;
font-weight: 600;
}
#gembaFormModal .gemba-guias, #producaoGembaPane .gemba-guias, #qualidadeAreaVermelhaPane .gemba-guias {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 2px;
}
#gembaFormModal .gemba-guia, #producaoGembaPane .gemba-guia, #qualidadeAreaVermelhaPane .gemba-guia {
border: 1px solid var(--border-color, #374151);
background: rgba(255,255,255,.04);
color: var(--content-color, #e5e7eb);
border-radius: 999px;
padding: 6px 14px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
}
#gembaFormModal .gemba-guia.is-active, #producaoGembaPane .gemba-guia.is-active, #qualidadeAreaVermelhaPane .gemba-guia.is-active {
background: rgba(14,165,233,.16);
border-color: #0284c7;
color: #7dd3fc;
}
#gembaFormModal [data-gemba-panel], #producaoGembaPane [data-gemba-panel], #qualidadeAreaVermelhaPane [data-gemba-panel] {
display: flex;
flex-direction: column;
gap: 12px;
}
#gembaFormModal [data-gemba-panel][hidden], #producaoGembaPane [data-gemba-panel][hidden], #qualidadeAreaVermelhaPane [data-gemba-panel][hidden] {
display: none !important;
}
#gembaFormModal .gemba-midia-hint, #producaoGembaPane .gemba-midia-hint, #qualidadeAreaVermelhaPane .gemba-midia-hint {
font-size: 11px;
color: #94a3b8;
margin-top: -4px;
}
#gembaFormModal .gemba-field, #producaoGembaPane .gemba-field, #qualidadeAreaVermelhaPane .gemba-field {
display: flex;
flex-direction: column;
gap: 6px;
font-size: 13px;
color: #cbd5e1;
}
#gembaFormModal .gemba-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), #producaoGembaPane .gemba-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), #qualidadeAreaVermelhaPane .gemba-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
#gembaFormModal .gemba-field textarea, #producaoGembaPane .gemba-field textarea, #qualidadeAreaVermelhaPane .gemba-field textarea,
#gembaFormModal .gemba-field select, #producaoGembaPane .gemba-field select, #qualidadeAreaVermelhaPane .gemba-field select {
width: 100%;
padding: 9px 11px;
border-radius: 8px;
border: 1px solid #374151;
background: #111827;
color: #e5e7eb;
}
#gembaFormModal .gemba-midia-grid, #producaoGembaPane .gemba-midia-grid, #qualidadeAreaVermelhaPane .gemba-midia-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
#gembaFormModal .gemba-midia-box, #producaoGembaPane .gemba-midia-box, #qualidadeAreaVermelhaPane .gemba-midia-box {
display: flex;
flex-direction: column;
gap: 8px;
font-size: 13px;
color: #cbd5e1;
border: 1px dashed #475569;
border-radius: 10px;
padding: 10px;
}
#gembaFormModal .gemba-preview, #producaoGembaPane .gemba-preview, #qualidadeAreaVermelhaPane .gemba-preview {
min-height: 90px;
border-radius: 8px;
background: #0f172a;
color: #64748b;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
font-size: 12px;
text-align: center;
}
#gembaFormModal .gemba-preview img, #producaoGembaPane .gemba-preview img, #qualidadeAreaVermelhaPane .gemba-preview img,
#gembaFormModal .gemba-preview video, #producaoGembaPane .gemba-preview video, #qualidadeAreaVermelhaPane .gemba-preview video {
width: 100%;
max-height: 180px;
object-fit: contain;
background: #0f172a;
}
#gembaFormModal .gemba-preview img, #producaoGembaPane .gemba-preview img, #qualidadeAreaVermelhaPane .gemba-preview img {
cursor: zoom-in;
}
#gembaFormModal .gemba-preview.is-gallery, #producaoGembaPane .gemba-preview.is-gallery, #qualidadeAreaVermelhaPane .gemba-preview.is-gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
gap: 6px;
padding: 6px;
overflow: auto;
align-items: stretch;
}
#gembaFormModal .gemba-preview.is-gallery img, #producaoGembaPane .gemba-preview.is-gallery img, #qualidadeAreaVermelhaPane .gemba-preview.is-gallery img {
max-height: 100px;
border-radius: 6px;
}
#gembaFormModal .gemba-user-combo, #producaoGembaPane .gemba-user-combo, #qualidadeAreaVermelhaPane .gemba-user-combo {
position: relative;
}
#gembaFormModal .gemba-user-combo-list, #producaoGembaPane .gemba-user-combo-list, #qualidadeAreaVermelhaPane .gemba-user-combo-list {
position: absolute;
z-index: 5;
left: 0;
right: 0;
top: calc(100% + 4px);
margin: 0;
padding: 4px;
list-style: none;
max-height: 220px;
overflow: auto;
border-radius: 8px;
border: 1px solid #374151;
background: #111827;
box-shadow: 0 12px 28px rgba(0,0,0,.35);
}
#gembaFormModal .gemba-user-combo-item, #producaoGembaPane .gemba-user-combo-item, #qualidadeAreaVermelhaPane .gemba-user-combo-item {
width: 100%;
text-align: left;
border: 0;
background: transparent;
color: #e5e7eb;
padding: 8px 10px;
border-radius: 6px;
cursor: pointer;
font-size: 13px;
}
#gembaFormModal .gemba-user-combo-item:hover, #producaoGembaPane .gemba-user-combo-item:hover, #qualidadeAreaVermelhaPane .gemba-user-combo-item:hover {
background: rgba(14,165,233,.16);
}
#gembaFormModal .gemba-user-combo-empty, #producaoGembaPane .gemba-user-combo-empty, #qualidadeAreaVermelhaPane .gemba-user-combo-empty {
padding: 8px 10px;
font-size: 12px;
color: #94a3b8;
}
#gembaFormModal .gemba-historico, #producaoGembaPane .gemba-historico, #qualidadeAreaVermelhaPane .gemba-historico {
border-top: 1px solid rgba(255,255,255,.08);
padding-top: 10px;
display: flex;
flex-direction: column;
gap: 8px;
}
#gembaFormModal .gemba-hist-title, #producaoGembaPane .gemba-hist-title, #qualidadeAreaVermelhaPane .gemba-hist-title {
font-size: 12px;
font-weight: 700;
color: #94a3b8;
}
#gembaFormModal .gemba-hist-item, #producaoGembaPane .gemba-hist-item, #qualidadeAreaVermelhaPane .gemba-hist-item {
font-size: 12px;
color: #cbd5e1;
display: flex;
flex-direction: column;
gap: 2px;
}
#gembaFormModal .gemba-hist-item span, #producaoGembaPane .gemba-hist-item span, #qualidadeAreaVermelhaPane .gemba-hist-item span,
#gembaFormModal .gemba-hist-item em, #producaoGembaPane .gemba-hist-item em, #qualidadeAreaVermelhaPane .gemba-hist-item em {
color: #94a3b8;
font-style: normal;
}
#gembaFormModal .gemba-form-erro, #producaoGembaPane .gemba-form-erro, #qualidadeAreaVermelhaPane .gemba-form-erro {
color: #f87171;
font-size: 13px;
}
#gembaFormModal .gemba-modal-actions, #producaoGembaPane .gemba-modal-actions, #qualidadeAreaVermelhaPane .gemba-modal-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
}
#gembaFormModal .gemba-btn-excluir, #producaoGembaPane .gemba-btn-excluir {
margin-right: auto;
background: #7f1d1d;
color: #fecaca;
border-color: #991b1b;
}
#gembaFormModal .gemba-planejamento-head, #producaoGembaPane .gemba-planejamento-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
margin-bottom: 10px;
}
#gembaFormModal .gemba-planejamento-head .gemba-midia-hint, #producaoGembaPane .gemba-planejamento-head .gemba-midia-hint {
margin: 0;
flex: 1;
}
#gembaFormModal .gemba-planejamento-lista, #producaoGembaPane .gemba-planejamento-lista {
display: flex;
flex-direction: column;
gap: 8px;
}
#gembaFormModal .gemba-sub-item, #producaoGembaPane .gemba-sub-item {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 8px;
align-items: center;
border: 1px solid var(--border-color, #374151);
border-radius: 10px;
padding: 8px 10px;
cursor: pointer;
background: rgba(255,255,255,.04);
}
#gembaFormModal .gemba-sub-item:hover, #producaoGembaPane .gemba-sub-item:hover {
border-color: #0284c7;
}
#gembaFormModal .gemba-sub-item strong, #producaoGembaPane .gemba-sub-item strong {
display: block;
font-size: 13px;
}
#gembaFormModal .gemba-sub-item small, #producaoGembaPane .gemba-sub-item small {
color: #94a3b8;
}
#gembaFormModal .gemba-btn-salvar, #producaoGembaPane .gemba-btn-salvar, #qualidadeAreaVermelhaPane .gemba-btn-salvar {
background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
color: #fff;
}
html.light-mode #gembaFormModal .gemba-modal-card,
html.light-mode #producaoGembaPane .gemba-card,
html.light-mode #producaoGembaPane .gemba-modal-card,
html.light-mode #qualidadeAreaVermelhaPane .gemba-card,
html.light-mode #qualidadeAreaVermelhaPane .gemba-modal-card {
background: #fff;
border-color: #dbe3ee;
}
html.light-mode #gembaFormModal .gemba-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
html.light-mode #gembaFormModal .gemba-field textarea,
html.light-mode #gembaFormModal .gemba-field select,
html.light-mode #producaoGembaPane .gemba-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
html.light-mode #producaoGembaPane .gemba-field textarea,
html.light-mode #producaoGembaPane .gemba-field select,
html.light-mode #gembaBusca,
html.light-mode #qualidadeAreaVermelhaBusca,
html.light-mode #gembaFormModal .gemba-user-combo-list,
html.light-mode #producaoGembaPane .gemba-user-combo-list {
background: #fff;
color: #0f172a;
}
html.light-mode #gembaFormModal .gemba-user-combo-item,
html.light-mode #producaoGembaPane .gemba-user-combo-item {
color: #0f172a;
}
html.light-mode #gembaFormModal .gemba-guia,
html.light-mode #producaoGembaPane .gemba-guia {
background: #fff;
color: #334155;
}
html.light-mode #gembaFormModal .gemba-guia.is-active,
html.light-mode #producaoGembaPane .gemba-guia.is-active {
background: #e0f2fe;
border-color: #0284c7;
color: #0369a1;
}
@media (max-width: 720px) {
#gembaFormModal .gemba-midia-grid,
#producaoGembaPane .gemba-midia-grid,
#producaoGembaPane .gemba-card-body {
grid-template-columns: 1fr;
}
}
/* Kanban Embalagem descontinuado — OP fica em Inspeção final até a RI */
#producaoKanban > div:has(#kanbanEmbalagem),
#montaKanban > div:has(#montaCol_embalagem),
#riRegistroKanban > div:has(#riRegistroCol_embalagem) {
display: none !important;
}
#producaoGerarOpPostosSelect option[value="Embalagem"] {
display: none !important;
}
#maqEstoqueKanban > div:has(#maqKanbanEmbalagem) {
display: none !important;
}
#maqEstoqueQrModal, #maqEstoqueColetaModal {
position: fixed;
inset: 0;
z-index: 12000;
display: none;
align-items: center;
justify-content: center;
padding: 16px;
background: rgba(2, 6, 23, 0.88);
}
#maqEstoqueQrModal.is-open, #maqEstoqueColetaModal.is-open {
display: flex;
}
#maqEstoqueQrModal[hidden], #maqEstoqueColetaModal[hidden] {
display: none !important;
}
#maqEstoqueQrModal .maq-estoque-qr-dialog, #maqEstoqueColetaModal .maq-estoque-qr-dialog, #maqSepDispModal .maq-estoque-qr-dialog {
width: min(480px, 100%);
max-height: min(88vh, 720px);
overflow: auto;
background: #111827;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 14px;
padding: 16px 16px 14px;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
color: #e2e8f0;
}
#maqEstoqueQrModal input[type="radio"] {
appearance: auto;
-webkit-appearance: radio;
width: 16px !important;
height: 16px !important;
min-width: 16px;
min-height: 16px;
margin: 3px 0 0;
flex-shrink: 0;
accent-color: #38bdf8;
}
#maqEstoqueQrModal .maq-estoque-qr-opcao {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 12px;
border-radius: 8px;
cursor: pointer;
}
#maqEstoqueQrModal .maq-estoque-qr-opcao span {
font-size: 13px;
font-weight: 700;
color: #e2e8f0;
}
#maqEstoqueQrModal .maq-estoque-qr-opcao small {
display: block;
margin-top: 4px;
font-size: 11px;
font-weight: 400;
color: #94a3b8;
line-height: 1.35;
}
#estoqueMaquinasPane .gemba-card {
background: var(--card-bg, #1e2535);
border: 1px solid var(--border-color, #374151);
border-radius: 12px;
overflow: hidden;
display: flex;
flex-direction: column;
position: relative;
transition: box-shadow .2s, transform .2s;
}
#estoqueMaquinasPane .gemba-card:hover {
box-shadow: 0 8px 24px rgba(0,0,0,.32);
transform: translateY(-1px);
}
#estoqueMaquinasPane .maq-estoque-card-action {
margin-top: 10px;
padding-top: 8px;
border-top: 1px solid rgba(148, 163, 184, .22);
color: #7dd3fc;
font-size: 12px;
font-weight: 700;
}
.maq-modelo-ops-modal[hidden] { display: none; }
.maq-modelo-ops-modal {
position: fixed;
inset: 0;
z-index: 10020;
display: grid;
place-items: center;
padding: 16px;
background: rgba(2, 6, 23, .72);
}
.maq-modelo-ops-dialog {
width: min(760px, 100%);
max-height: min(90vh, 900px);
overflow: auto;
border-radius: 8px;
background: #f8fafc;
box-shadow: 0 24px 60px rgba(0, 0, 0, .42);
}
.maq-modelo-ops-header {
position: sticky;
top: 0;
z-index: 2;
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
border-bottom: 1px solid #cbd5e1;
background: #fff;
}
.maq-modelo-ops-header h4 { margin: 0; color: #0f172a; }
.maq-modelo-ops-header button {
margin-left: auto;
min-height: 40px;
padding: 6px 12px;
border: 1px solid #cbd5e1;
border-radius: 7px;
background: #fff;
color: #0f172a;
cursor: pointer;
}
@media (max-width: 600px) {
.maq-modelo-ops-modal { align-items: end; padding: 0; }
.maq-modelo-ops-dialog { max-height: 100dvh; border-radius: 8px 8px 0 0; padding-bottom: env(safe-area-inset-bottom, 0); }
}
#estoqueMaquinasPane .gemba-card-corner {
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 26px 26px 0;
border-color: transparent #64748b transparent transparent;
}
#estoqueMaquinasPane .gemba-card-corner[data-status="producao"] { border-right-color: #22c55e; }
#estoqueMaquinasPane .gemba-card-corner[data-status="notificacao"] { border-right-color: #ef4444; }
#estoqueMaquinasPane .gemba-card-corner[data-status="programado"] { border-right-color: #64748b; }
#estoqueMaquinasPane .monta-quina-legenda {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 14px;
margin: 0 0 12px 4px;
}
#estoqueMaquinasPane .monta-quina-legenda-item {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
color: #94a3b8;
white-space: nowrap;
}
#estoqueMaquinasPane .monta-quina-legenda-corner {
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 0 12px 12px 0;
border-color: transparent #64748b transparent transparent;
flex-shrink: 0;
}
#estoqueMaquinasPane .monta-quina-legenda-corner[data-status="producao"] { border-right-color: #22c55e; }
#estoqueMaquinasPane .monta-quina-legenda-corner[data-status="notificacao"] { border-right-color: #ef4444; }
#estoqueMaquinasPane .gemba-card-head {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
padding: 10px 28px 8px 12px;
border-bottom: 1px solid var(--border-color, #374151);
}
#estoqueMaquinasPane .gemba-card-id {
background: #0ea5e9;
color: #fff;
border-radius: 20px;
padding: 2px 8px;
font-size: 10px;
font-weight: 700;
}
#estoqueMaquinasPane .gemba-card-date {
font-size: 10px;
color: var(--inactive-color);
}
#estoqueMaquinasPane .gemba-card-status {
margin-left: auto;
font-size: 10px;
border-radius: 6px;
padding: 2px 7px;
background: rgba(255,255,255,.07);
color: #fcd34d;
}
#estoqueMaquinasPane .gemba-card-status[data-status="producao"] { color: #86efac; }
#estoqueMaquinasPane .gemba-card-status[data-status="notificacao"] { color: #fca5a5; }
#estoqueMaquinasPane .gemba-card-status[data-status="programado"] { color: #94a3b8; }
#estoqueMaquinasPane .gemba-card-body {
display: block;
padding: 10px 12px 14px;
}
#estoqueMaquinasPane .gemba-card-text h3 {
margin: 0 0 6px;
font-size: 14px;
color: var(--content-title-color, #e5e7eb);
}
#estoqueMaquinasPane .gemba-card-text p {
margin: 0;
font-size: 12px;
color: var(--inactive-color);
line-height: 1.45;
}
#qualidadeAreaVermelhaPane .gemba-card-corner[data-status="registrado"] { border-right-color: #a855f7; }
#qualidadeAreaVermelhaPane .gemba-card-corner[data-status="aguardando_aprovacao"] { border-right-color: #f59e0b; }
#qualidadeAreaVermelhaPane .gemba-card-corner[data-status="scrap"] { border-right-color: #ef4444; }
#qualidadeAreaVermelhaPane .gemba-card-corner[data-status="retrabalho"] { border-right-color: #f97316; }
#qualidadeAreaVermelhaPane .gemba-card-corner[data-status="liberado"] { border-right-color: #22c55e; }
#qualidadeAreaVermelhaPane .gemba-card-corner[data-status="pir"] { border-right-color: #64748b; }
#qualidadeAreaVermelhaPane .gemba-card-status[data-status="registrado"] { color: #d8b4fe; }
#qualidadeAreaVermelhaPane .gemba-card-status[data-status="aguardando_aprovacao"] { color: #fcd34d; }
#qualidadeAreaVermelhaPane .gemba-card-status[data-status="scrap"] { color: #fca5a5; }
#qualidadeAreaVermelhaPane .gemba-card-status[data-status="retrabalho"] { color: #fdba74; }
#qualidadeAreaVermelhaPane .gemba-card-status[data-status="liberado"] { color: #86efac; }
#qualidadeAreaVermelhaPane .gemba-card-status[data-status="pir"] { color: #cbd5e1; }
#qualidadeAreaVermelhaPane .av-niq-midia-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-top: 8px;
}
#qualidadeAreaVermelhaPane .av-niq-midia-box {
border: 1px solid rgba(255,255,255,.1);
border-radius: 10px;
padding: 10px;
background: rgba(15,23,42,.45);
}
#qualidadeAreaVermelhaPane .av-niq-midia-box .av-niq-midia-label {
display: block;
font-size: 12px;
color: #94a3b8;
margin-bottom: 8px;
}
#qualidadeAreaVermelhaPane .av-niq-preview img,
#qualidadeAreaVermelhaPane .av-niq-preview video {
width: 100%;
max-height: 220px;
object-fit: contain;
border-radius: 8px;
background: #0f172a;
cursor: pointer;
}
#qualidadeAreaVermelhaPane .av-niq-anexar {
display: inline-block;
margin-top: 8px;
cursor: pointer;
}
#qualidadeAreaVermelhaPane .av-niq-anexar-btn {
display: inline-block;
padding: 6px 10px;
border-radius: 8px;
background: #334155;
color: #e2e8f0;
font-size: 12px;
border: 1px solid rgba(255, 255, 255, 0.12);
}
#qualidadeAreaVermelhaPane .av-niq-anexar:hover .av-niq-anexar-btn {
background: #475569;
}
#qualidadeAreaVermelhaPane .av-niq-anexar-status {
font-size: 11px;
color: #94a3b8;
min-height: 14px;
margin-top: 4px;
}
#qualidadeAreaVermelhaPane .av-niq-kv {
display: grid;
grid-template-columns: 140px 1fr;
gap: 6px 10px;
font-size: 13px;
margin: 0 0 12px;
}
#qualidadeAreaVermelhaPane .av-niq-kv dt { color: #94a3b8; }
#qualidadeAreaVermelhaPane .av-niq-kv dd { margin: 0; color: #e2e8f0; }
#qualidadeAreaVermelhaPane .av-niq-acoes {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: flex-end;
}
/* ===== Menu de ferramentas do header (ícones agrupados) ===== */
.header-utils-wrap {
position: relative;
display: inline-flex;
align-items: center;
flex-shrink: 0;
}
.header-utils-toggle {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 10px;
background: rgba(255, 255, 255, 0.06);
color: #f9fafb;
cursor: pointer;
transition: background .15s, border-color .15s, transform .15s;
}
.header-utils-toggle:hover,
.header-utils-toggle[aria-expanded="true"] {
background: rgba(255, 255, 255, 0.14);
border-color: rgba(255, 255, 255, 0.32);
transform: none;
}
.header-utils-toggle i {
font-size: 1.15rem;
color: inherit;
margin: 0;
transform: none !important;
}
.header-utils-toggle .chamado-badge {
top: -5px;
right: -6px;
}
.header-utils-menu {
position: absolute;
top: calc(100% + 10px);
right: 0;
min-width: 240px;
max-width: min(92vw, 280px);
padding: 8px;
display: flex;
flex-direction: column;
gap: 2px;
background: var(--dropdown-bg, #1f2430);
border: 1px solid var(--border-color, rgba(113, 119, 144, 0.35));
border-radius: 12px;
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
z-index: 1200;
}
.header-utils-menu[hidden] {
display: none !important;
}
.header-utils-menu__title {
padding: 6px 10px 8px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #94a3b8;
}
.header-utils-menu__item {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 10px 12px;
border: 0;
border-radius: 8px;
background: transparent;
color: var(--theme-color, #e2e8f0);
cursor: pointer;
text-align: left;
}
.header-utils-menu__item:hover {
background: var(--dropdown-hover, rgba(255, 255, 255, 0.08));
}
.header-utils-menu__item > i,
.header-utils-menu__item .notification {
position: relative;
width: 22px;
flex: 0 0 22px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.05rem;
color: inherit;
margin: 0;
transform: none !important;
}
.header-utils-menu__item .notification {
width: 22px;
}
.header-utils-menu__label {
flex: 1 1 auto;
font-size: 13px;
font-weight: 500;
line-height: 1.2;
color: inherit;
}
/* Esconde linhas cujo atalho está oculto (display:none) */
.header-utils-menu__item:has(> [style*="display: none"]),
.header-utils-menu__item:has(> [style*="display:none"]) {
display: none !important;
}
.light-mode .header-utils-toggle {
background: rgba(15, 23, 42, 0.04);
border-color: rgba(15, 23, 42, 0.12);
color: #374151;
}
.light-mode .header-utils-toggle:hover,
.light-mode .header-utils-toggle[aria-expanded="true"] {
background: rgba(15, 23, 42, 0.08);
border-color: rgba(15, 23, 42, 0.2);
}
.light-mode .header-utils-toggle i {
color: #374151 !important;
}
.light-mode .header-utils-menu {
background: #fff;
border-color: #e5e7eb;
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
}
.light-mode .header-utils-menu__item {
color: #1f2937;
}
.light-mode .header-utils-menu__item > i,
.light-mode .header-utils-menu__item .notification i {
color: #4b5563 !important;
}
/* Mantém a referência visual clara da solicitação, inclusive no tema escuro. */
:root:not(.light-mode) #modalCatalogoOmie .catalogo-compra-modal__content,
:root:not(.light-mode) #modalCatalogoOmie .modal-header {
background: #fff !important;
color: #1e293b !important;
}
:root:not(.light-mode) #modalCatalogoOmie .modal-body { background: #f4f7fb !important; }
:root:not(.light-mode) #modalCatalogoOmie .catalogo-compra-modal__grid > div,
:root:not(.light-mode) #modalCatalogoOmie #catalogoPreCadastroBloco { background: #fff !important; }
:root:not(.light-mode) #modalCatalogoOmie span { color: inherit !important; }
#modalCatalogoOmie .catalogo-upload-zone { padding: 8px; border: 1px dashed transparent; border-radius: 8px; transition: .15s ease; }
#modalCatalogoOmie .catalogo-upload-zone.is-dragging { border-color: #2563eb; background: #eff6ff; }
#modalCatalogoOmie .catalogo-upload-zone__hint { color: #64748b !important; font-size: 11px; }