/* Estilos extraídos do index.html e estilos inline normalizados. */
/* Regra operacional: campos editáveis nunca podem bloquear copiar/colar no mobile. */
input,
textarea,
select,
[contenteditable=""],
[contenteditable="true"],
[data-permite-clipboard="true"] {
-webkit-user-select: text !important;
user-select: text !important;
-webkit-touch-callout: default !important;
}
/* Bloco inline original #1 */
/* Mantém os cabeçalhos e células em uma única linha para não desalinharem */
/* 🎯 Ajuste de Alinhamento e Largura do SLA */
#tabela-sla th, #tabela-sla td {
vertical-align: middle;
text-align: center; /* Centro por padrão para os tempos */
padding: 8px !important;
}
.dashboard-scroll-card {
max-height: 340px;
overflow-y: auto;
padding: 8px 2px 2px;
}
.dashboard-scroll-card .list-group-item,
.dashboard-scroll-card .table td {
word-break: normal;
overflow-wrap: anywhere;
}
.suporte-checklist-scroll {
max-height: 210px;
overflow-y: auto;
padding: 10px;
background: #fff;
border: 1px solid #dee2e6;
border-radius: 8px;
}
.suporte-checklist-scroll .form-check {
padding-top: 6px;
padding-bottom: 6px;
}
.suporte-checklist-scroll .form-check + .form-check {
border-top: 1px solid #f1f3f5;
}
.clientes-vendedor-scroll {
max-height: 420px;
overflow-y: auto;
}
.cliente-vendedor-card {
border-bottom: 1px solid #e9ecef;
padding: 9px 4px;
background: #fff;
}
.cliente-vendedor-card + .cliente-vendedor-card {
margin-top: 0;
}
.btn-editar-cliente-vendedor {
border: 0;
background: transparent;
color: #0d6efd;
font-size: 0.9rem;
line-height: 1;
padding: 2px 4px;
flex: 0 0 auto;
}
.btn-editar-cliente-vendedor:hover {
color: #0a58ca;
}
.data-hora-radar-vendedor {
white-space: nowrap;
display: inline-flex;
align-items: baseline;
gap: 4px;
}
.data-hora-radar-vendedor .hora {
font-weight: 700;
color: #212529;
}
.data-hora-radar-vendedor .data {
font-size: 0.78rem;
color: #6c757d;
}
.farol-numero {
text-align: right;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* ========================================== */
/* 📱 MODO CARD: TODAS AS TABELAS NO CELULAR */
/* ========================================== */
@media (max-width: 768px) {
.dashboard-scroll-card {
max-height: 260px;
padding: 8px 0 0;
}
.suporte-checklist-scroll {
max-height: 180px;
}
.clientes-vendedor-scroll {
max-height: 320px;
}
/* 1. Esconde TODOS os cabeçalhos clássicos */
#painel_vendedor .table thead, #controle .table thead,
#credito .table thead, #faturista .table thead { display: none; }
/* 2. Transforma cada linha num "Cartão App" */
#tabela-vendedor tr, #tabela-controle tr,
#tabela-credito tr, #tabela-credito-balcao tr, #tabela-credito-pan tr, #tabela-credito-bin tr,
#tabela-faturista tr, #tabela-faturista-acompanhamento tr {
display: flex; flex-direction: column; background: #ffffff; border: 1px solid #ced4da;
border-radius: 12px; margin-bottom: 16px; padding: 15px; box-shadow: 0 4px 8px rgba(0,0,0,0.06);
}
/* 3. Ajusta as células para ocuparem 100% da largura do cartão */
#tabela-vendedor td, #tabela-controle td,
#tabela-credito td, #tabela-credito-balcao td, #tabela-credito-pan td, #tabela-credito-bin td,
#tabela-faturista td, #tabela-faturista-acompanhamento td {
display: block; border: none !important; padding: 2px 0 !important; text-align: left !important; width: 100%;
}
/* ========================================== */
/* 🛒 ORDENAÇÃO: PAINEL VENDEDOR */
#tabela-vendedor td:nth-child(3) { order: 1; font-size: 1.2rem; margin-bottom: 8px; } /* Cliente */
#tabela-vendedor td:nth-child(2) { order: 2; font-size: 0.95rem; background-color: #f8f9fa; padding: 8px !important; border-radius: 6px; margin-bottom: 6px; } /* Ordem/Vendedor */
#tabela-vendedor td:nth-child(1) { order: 3; font-size: 0.85rem; color: #6c757d; margin-bottom: 12px; padding-left: 8px !important; } /* Hora */
#tabela-vendedor td:nth-child(4) { order: 4; border-top: 1px dashed #dee2e6 !important; padding-top: 12px !important; } /* Status e Botões */
#tabela-vendedor td:nth-child(4) .btn { margin-bottom: 5px; padding: 8px !important; font-size: 0.85rem !important; }
/* ========================================== */
/* 📝 ORDENAÇÃO: CONTROLE DIÁRIO */
#tabela-controle td:nth-child(3) { order: 1; font-size: 1.2rem; margin-bottom: 8px; } /* Cliente */
#tabela-controle td:nth-child(2) { order: 2; font-size: 0.95rem; background-color: #f8f9fa; padding: 8px !important; border-radius: 6px; margin-bottom: 6px; } /* Ordem/Vendedor */
#tabela-controle td:nth-child(4) { order: 3; font-size: 0.95rem; margin-bottom: 6px; font-weight: bold; color: #0d6efd; } /* Nº NF */
#tabela-controle td:nth-child(1) { order: 4; font-size: 0.85rem; color: #6c757d; margin-bottom: 12px; padding-left: 8px !important; } /* Hora/Atraso */
#tabela-controle td:nth-child(5) { order: 5; border-top: 1px dashed #dee2e6 !important; padding-top: 12px !important; } /* Ações (Select/Botões) */
#tabela-controle td:nth-child(5) .btn, #tabela-controle td:nth-child(5) select { margin-bottom: 8px; font-size: 0.85rem !important; }
/* ========================================== */
/* 💰 ORDENAÇÃO: CRÉDITO (As 4 Tabelas) */
/* ========================================== */
/* 1. Análise Principal e PAM (Cliente na TD 3) */
#tabela-credito td:nth-child(3), #tabela-credito-pan td:nth-child(3) { order: 1; font-size: 1.2rem; margin-bottom: 8px; }
#tabela-credito td:nth-child(2), #tabela-credito-pan td:nth-child(2) { order: 2; font-size: 0.95rem; background-color: #f8f9fa; padding: 8px !important; border-radius: 6px; margin-bottom: 6px; }
#tabela-credito td:nth-child(4), #tabela-credito-pan td:nth-child(4) { order: 3; margin-bottom: 8px; } /* Switches ou Status */
#tabela-credito td:nth-child(1), #tabela-credito-pan td:nth-child(1) { order: 4; font-size: 0.85rem; color: #6c757d; margin-bottom: 12px; padding-left: 8px !important; }
#tabela-credito td:nth-child(5), #tabela-credito-pan td:nth-child(5) { order: 5; border-top: 1px dashed #dee2e6 !important; padding-top: 12px !important; }
/* 2. Crédito Balcão (Recepção) - A estrela do celular! (Cliente na TD 3) */
#tabela-credito-balcao tr { border-color: #0d6efd !important; } /* Destaque azul Retira Facil */
#tabela-credito-balcao td:nth-child(3) { order: 1; font-size: 1.2rem; margin-bottom: 8px; }
#tabela-credito-balcao td:nth-child(1) { order: 2; margin-bottom: 8px; } /* Status Chegou */
#tabela-credito-balcao td:nth-child(2) { order: 3; font-size: 0.95rem; background-color: #eef4ff; padding: 8px !important; border-radius: 6px; margin-bottom: 12px; } /* Ordem NF em destaque */
#tabela-credito-balcao td:nth-child(4) { order: 4; border-top: 1px dashed #0d6efd !important; padding-top: 12px !important; } /* Input e Botões */
/* 3. Auditoria BIN (Cliente na TD 2) */
#tabela-credito-bin td:nth-child(2) { order: 1; font-size: 1.2rem; margin-bottom: 8px; }
#tabela-credito-bin td:nth-child(3) { order: 2; font-size: 1.1rem; margin-bottom: 8px; } /* Peso */
#tabela-credito-bin td:nth-child(1) { order: 3; font-size: 0.95rem; background-color: #f8f9fa; padding: 8px !important; border-radius: 6px; margin-bottom: 12px; } /* Ordem */
#tabela-credito-bin td:nth-child(4) { order: 4; border-top: 1px dashed #dee2e6 !important; padding-top: 12px !important; }
/* ========================================== */
/* 🧾 ORDENAÇÃO: FATURAMENTO (As 2 Tabelas) */
/* ========================================== */
#tabela-faturista td:nth-child(3), #tabela-faturista-acompanhamento td:nth-child(3) { order: 1; font-size: 1.2rem; margin-bottom: 8px; }
#tabela-faturista td:nth-child(2), #tabela-faturista-acompanhamento td:nth-child(2) { order: 2; font-size: 0.95rem; background-color: #f8f9fa; padding: 8px !important; border-radius: 6px; margin-bottom: 6px; }
#tabela-faturista td:nth-child(1), #tabela-faturista-acompanhamento td:nth-child(1) { order: 3; font-size: 0.85rem; color: #6c757d; margin-bottom: 12px; padding-left: 8px !important; }
#tabela-faturista td:nth-child(4), #tabela-faturista-acompanhamento td:nth-child(4) { order: 4; border-top: 1px dashed #dee2e6 !important; padding-top: 12px !important; }
/* Ajuste para os botões do Faturista não ficarem colados */
#tabela-faturista td:nth-child(4) .btn, #tabela-faturista-acompanhamento td:nth-child(4) .btn { margin-bottom: 8px; }
#suporte-painel .table thead { display: none; }
#tabela-usuarios-suporte tr {
display: flex;
flex-direction: column;
background: #ffffff;
border: 1px solid #dee2e6;
border-radius: 12px;
margin-bottom: 12px;
padding: 14px;
box-shadow: 0 4px 8px rgba(0,0,0,0.06);
}
#tabela-usuarios-suporte td {
display: block;
width: 100%;
border: none !important;
padding: 2px 0 !important;
text-align: left !important;
}
#tabela-usuarios-suporte td:nth-child(1) { order: 1; font-size: 1.1rem; margin-bottom: 6px; }
#tabela-usuarios-suporte td:nth-child(2) { order: 2; margin-bottom: 8px; }
#tabela-usuarios-suporte td:nth-child(3),
#tabela-usuarios-suporte td:nth-child(4),
#tabela-usuarios-suporte td:nth-child(5),
#tabela-usuarios-suporte td:nth-child(6) { order: 3; font-size: 0.9rem; color: #6c757d; }
#config .table thead { display: none; }
#tabela-frases-admin tr {
display: flex;
flex-direction: column;
background: #ffffff;
border: 1px solid #dee2e6;
border-radius: 12px;
margin-bottom: 12px;
padding: 14px;
box-shadow: 0 4px 8px rgba(0,0,0,0.06);
}
#tabela-frases-admin td {
display: block;
width: 100%;
border: none !important;
padding: 2px 0 !important;
text-align: left !important;
}
#tabela-frases-admin td:nth-child(1) { order: 1; font-size: 1rem; margin-bottom: 8px; }
#tabela-frases-admin td:nth-child(2),
#tabela-frases-admin td:nth-child(3),
#tabela-frases-admin td:nth-child(4) { order: 2; font-size: 0.9rem; color: #6c757d; }
/* AUDITORIA MOBILE */
#tabela-auditoria tr {
display: flex;
flex-direction: column;
background: #ffffff;
border: 1px solid #ced4da;
border-radius: 12px;
margin-bottom: 12px;
padding: 14px;
box-shadow: 0 4px 8px rgba(0,0,0,0.06);
}
#tabela-auditoria td { display: block; width: 100%; border: none !important; padding: 2px 0 !important; text-align: left !important; }
#tabela-auditoria td:nth-child(2) { order: 1; font-size: 1.1rem; margin-bottom: 6px; font-weight: bold; color: #212529; }
#tabela-auditoria td:nth-child(1) { order: 2; font-size: 0.85rem; color: #6c757d; margin-bottom: 8px; }
#tabela-auditoria td:nth-child(4) { order: 3; font-size: 0.9rem; margin-bottom: 4px; }
#tabela-auditoria td:nth-child(6) { order: 4; font-size: 0.9rem; margin-bottom: 4px; }
#tabela-auditoria td:nth-child(7) { order: 5; margin-top: 8px; margin-bottom: 4px; }
#tabela-auditoria td:nth-child(3), #tabela-auditoria td:nth-child(5), #tabela-auditoria td:nth-child(8) { display: none !important; }
}
.linha-usuario-suporte { cursor: pointer; }
.linha-usuario-suporte:hover { background-color: #fff9e6; }
.suporte-status-badges .badge { margin-right: 4px; margin-bottom: 4px; }
.linha-frase-admin { cursor: pointer; }
.linha-frase-admin:hover { background-color: #eef4ff; }
@media (min-width: 769px) {
#tabela-usuarios-suporte .suporte-dica-mobile { display: none; }
}
/* ⬅️ Alinhamento à esquerda para Data, Ordem e Cliente */
#tabela-sla th:nth-child(1), #tabela-sla td:nth-child(1),
#tabela-sla th:nth-child(2), #tabela-sla td:nth-child(2),
#tabela-sla th:nth-child(3), #tabela-sla td:nth-child(3) {
text-align: left !important;
white-space: normal !important; /* Permite quebrar linha e economiza espaço lateral */
}
/* ========================================== */
/* 📊 ORDENAÇÃO: RELATÓRIO SLA (APENAS CELULAR) */
/* ========================================== */
@media (max-width: 768px) {
/* Esconde o cabeçalho clássico só no celular */
#tabela-sla thead { display: none; }
/* Transforma cada linha num "Cartão App" */
#tabela-relatorio tr {
display: flex; flex-direction: column; background: #ffffff; border: 1px solid #ced4da;
border-radius: 12px; margin-bottom: 16px; padding: 15px; box-shadow: 0 4px 8px rgba(0,0,0,0.06);
}
#tabela-relatorio td {
display: block; border: none !important; padding: 2px 0 !important; width: 100%;
}
/* 1º Topo: Cliente (Gigante) */
#tabela-relatorio td:nth-child(3) { order: 1; font-size: 1.2rem; font-weight: bold; margin-bottom: 8px; text-align: left !important; }
/* 2º Meio: Ordem e Vendedor */
#tabela-relatorio td:nth-child(2) { order: 2; font-size: 0.95rem; background-color: #f8f9fa; padding: 8px !important; border-radius: 6px; margin-bottom: 6px; text-align: left !important; }
/* 3º Meio: Data e Hora */
#tabela-relatorio td:nth-child(1) { order: 3; font-size: 0.85rem; color: #6c757d; margin-bottom: 16px; padding-bottom: 8px !important; border-bottom: 1px dashed #dee2e6; text-align: left !important; }
/* ========================================== */
/* O "EXTRATO" DO SLA (Caixinhas de Tempo) */
/* ========================================== */
#tabela-relatorio td:nth-child(4),
#tabela-relatorio td:nth-child(5),
#tabela-relatorio td:nth-child(6),
#tabela-relatorio td:nth-child(7),
#tabela-relatorio td:nth-child(8) {
background: #fdfdfe; border: 1px solid #e9ecef !important;
border-radius: 6px; margin-bottom: 6px; padding: 8px 12px !important;
text-align: right !important; /* Alinha o tempo para a direita */
font-size: 0.9rem;
}
/* Injetando os Nomes das Colunas à Esquerda! */
#tabela-relatorio td:nth-child(4)::before,
#tabela-relatorio td:nth-child(5)::before,
#tabela-relatorio td:nth-child(6)::before,
#tabela-relatorio td:nth-child(7)::before,
#tabela-relatorio td:nth-child(8)::before {
display: none;
font-size: 0.75rem; font-weight: bold; text-transform: uppercase; color: #6c757d;
}
#tabela-relatorio td:nth-child(4)::before { content: "1. Análise (Crédito)"; }
#tabela-relatorio td:nth-child(5)::before { content: "2. Faturamento"; }
#tabela-relatorio td:nth-child(6)::before { content: "3. Gargalo Vendedor"; color: #8f3838; }
#tabela-relatorio td:nth-child(7)::before { content: "4. Logística"; }
#tabela-relatorio td:nth-child(8)::before { content: "5. Espera Cliente"; }
#tabela-relatorio .sla-etapa-linha {
display: flex;
align-items: flex-end;
white-space: normal;
}
/* Forçando a ordem das caixinhas */
#tabela-relatorio td:nth-child(4) { order: 4; }
#tabela-relatorio td:nth-child(5) { order: 5; }
#tabela-relatorio td:nth-child(6) { order: 6; }
#tabela-relatorio td:nth-child(7) { order: 7; }
#tabela-relatorio td:nth-child(8) { order: 8; }
/* ========================================== */
/* O GRAND FINALE: TEMPO TOTAL DA OPERAÇÃO */
/* ========================================== */
#tabela-relatorio td:nth-child(9) {
order: 9; margin-top: 12px; padding-top: 12px !important;
border-top: 2px solid #0d6efd !important; text-align: center !important;
font-size: 1.3rem; background-color: #f0f8ff; border-radius: 0 0 12px 12px;
}
#tabela-relatorio td:nth-child(9)::before {
content: "⏱️ TEMPO TOTAL DA OPERAÇÃO"; font-size: 0.75rem; font-weight: bold;
color: #0d6efd; display: block; margin-bottom: 4px;
}
}
/* Trava a largura da coluna cliente para não esticar a tabela */
#tabela-sla td:nth-child(3) {
max-width: 300px;
min-width: 200px;
}
/* Mantém os tempos em uma linha só para não ficar "escadinha" */
#tabela-sla td:nth-child(n+4) {
white-space: nowrap;
}
.sla-etapa-linha {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 0.05rem;
max-width: 100%;
line-height: 1.15;
white-space: normal;
}
.sla-etapa-responsavel {
color: #6c757d;
font-size: 0.75rem;
font-weight: 600;
}
/* Computador (Telas Grandes) */
.container-fluid.pt-3 {
margin-top: 110px;
}
/* 🦎 Títulos "Camaleão": Grandes no PC, Compactos no Celular */
h3.text-primary, h4.text-primary {
transition: font-size 0.3s ease; /* Transição suave ao girar o celular */
}
/* Regras apenas para Celulares (telas menores que 768px) */
@media (max-width: 768px) {
h3.text-primary {
font-size: 1.3rem !important; /* Tamanho para "Visão Estratégica" */
}
h4.text-primary {
font-size: 1.1rem !important; /* Tamanho para "Ordens Ativas", "Logística", etc. */
}
/* Ajuste extra para os cabeçalhos das tabelas e seções secundárias */
.card-header, h5, h6 {
font-size: 0.95rem !important;
}
}
/* 🦎 Textos e Badges Adaptáveis */
@media (max-width: 768px) {
/* Tabelas menores para não precisar de tanto scroll */
table, .table td, .table th {
font-size: 0.85rem !important;
}
/* Etiquetas (Badges) mais compactas */
.badge {
font-size: 0.75rem !important;
padding: 4px 8px !important;
}
/* Texto dos Cards da Logística */
.card-title {
font-size: 1rem !important;
}
.card-text {
font-size: 0.9rem !important;
}
/* Inputs e botões um pouco menores para caberem lado a lado */
.btn-lg {
font-size: 1rem !important;
padding: 10px !important;
}
}
/* Celular e Telas Pequenas (A mágica da responsividade) */
@media (max-width: 768px) {
.container-fluid.pt-3 {
margin-top: 190px !important; /* Empurra mais para baixo porque o menu ficou mais alto */
}
}
/* 4. Cabeçalho Fixo Blindado */
.cabecalho-fixo {
position: fixed; /* Prega no topo da tela à força */
top: 0;
left: 0;
width: 100%; /* Pega a tela toda de ponta a ponta */
z-index: 1030; /* Fica na frente de modais e tabelas */
background-color: #f4f6f9;
padding: 15px 20px 5px 20px;
border-bottom: 2px solid #ced4da;
box-shadow: 0 4px 10px -4px rgba(0,0,0,0.1);
}
/* 🦎 Modo Camaleão (Celular): Textos, Botões e Tabelas Adaptáveis */
@media (max-width: 768px) {
/* Ajuste dos Títulos Principais */
h3.text-primary { font-size: 1.3rem !important; }
h4.text-primary { font-size: 1.1rem !important; }
.card-header, h5, h6 { font-size: 0.95rem !important; }
/* ----------------------------------------- */
/* 📊 SUPER COMPACTAÇÃO DE TABELAS */
/* ----------------------------------------- */
/* 1. Cria a caixa base (REMOVIDO O NOWRAP VILÃO!) */
.table {
display: block;
overflow-x: auto;
width: 100%;
}
/* 2. Força o cabeçalho e o corpo a terem exatamente a mesma largura (100%) */
.table > thead, .table > tbody {
display: table;
width: 100%;
min-width: 100%;
}
/* 3. 🔥 A CURA: Permite que etiquetas e textos "desçam" de linha sem empurrar o layout */
.table th, .table td {
font-size: 0.80rem !important;
padding: 0.4rem 0.2rem !important;
vertical-align: middle;
white-space: normal !important; /* Libera as etiquetas para empilharem! */
word-wrap: break-word; /* Corta palavras gigantes para proteger o botão */
}
/* 4. Botões versão "Micro" */
.table .btn {
font-size: 0.75rem !important;
padding: 0.3rem 0.4rem !important;
line-height: 1.2; /* Deixa o botão mais enxuto */
}
/* ----------------------------------------- */
/* 🏷️ ETIQUETAS E LOGÍSTICA */
/* ----------------------------------------- */
.badge {
font-size: 0.70rem !important;
padding: 4px 6px !important;
}
.card-title { font-size: 1rem !important; }
.card-text { font-size: 0.9rem !important; }
.btn-lg {
font-size: 1rem !important;
padding: 10px !important;
}
}
.btn-bd-primary {
--bd-violet-bg: #712cf9;
--bd-violet-rgb: 112.520718, 44.062154, 249.437846;
--bs-btn-font-weight: 600;
--bs-btn-color: var(--bs-white);
--bs-btn-bg: var(--bd-violet-bg);
--bs-btn-border-color: var(--bd-violet-bg);
--bs-btn-hover-color: var(--bs-white);
--bs-btn-hover-bg: #6528e0;
--bs-btn-hover-border-color: #6528e0;
--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
--bs-btn-active-color: var(--bs-btn-hover-color);
--bs-btn-active-bg: #5a23c8;
--bs-btn-active-border-color: #5a23c8;
}
/* Como o cabeçalho agora flutua, precisamos empurrar o conteúdo para baixo para não sumir atrás dele */
.container-fluid.pt-3 {
margin-top: 110px;
}
/* Padronização de todos os botões do menu */
.btn-menu-base {
border: none !important;
border-radius: 6px !important;
padding: 10px 15px !important;
font-weight: bold !important;
cursor: pointer !important;
text-decoration: none !important;
display: inline-block !important;
font-size: 14px !important;
color: #ffffff !important; /* Texto branco padrão */
}
.btn-delete {
background-color: transparent !important;
color: #a94747 !important; /* Vermelho Alerta */
border: 1px solid #a94747 !important;
padding: 5px 8px !important;
border-radius: 4px;
cursor: pointer;
transition: 0.3s;
}
.btn-delete:hover {
background-color: #a94747 !important;
color: white !important;
}
/* 1. Estilo Azul Moura */
.moura-azul { background-color: #0d6efd !important; }
/* 2. Estilo Cinza Escuro (Neutro) */
.moura-dark { background-color: #333333 !important; }
/* 3. Estilo Amarelo (Destaque) */
.moura-yellow {
background-color: #FFCC00 !important;
color: #000000 !important; /* Único com texto preto */
}
/* 4. Estilo Vermelho (Ação/Sair) */
.moura-red { background-color: #a94747 !important; }
/* Remove fundos extras de links dentro dos botões */
.btn-menu-base a, .btn-menu-base span {
background: transparent !important;
color: inherit !important;
}
.btn-trash {
background-color: #f8d7da !important;
color: #a94747 !important;
border: 1px solid #a94747 !important;
padding: 6px 10px;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
transition: 0.3s;
}
.btn-trash:hover {
background-color: #a94747 !important;
color: white !important;
}
.svg-log-p {
width: 33%;
min-width: 100px; /* Impede que a logo fique menor que 100 pixels no celular */
height: auto;
}
.svg-log-m {
width: 60%;
min-width: 180px; /* Garante um tamanho decente para a versão 'm' também */
height: auto;
}
/* Regra aplicada apenas para telas de celular (menores que 768px) */
@media (max-width: 768px) {
.btn-entendi {
margin-right: 80px; /* Cria um campo de força invisível na direita */
}
}
/* Animação para o card que sobe para o topo */
.card-chegou-novo {
animation: slideInDown 0.5s ease-out;
border-left: 8px solid #0d6efd !important; /* Destaque azul Retira Facil */
background-color: #eef6ff !important; /* Fundo azul suave */
}
@keyframes slideInDown {
0% { opacity: 0; transform: translateY(-20px); }
100% { opacity: 1; transform: translateY(0); }
}
/* ========================================== */
/* UIX RETIRA FACIL - CANDIDATO INDEX_26 */
/* Base: azul do logo Retira Facil, amarelo pastel e cinzas operacionais.
Verde fica reservado/neutralizado para nao dominar a interface. */
/* ========================================== */
:root {
color-scheme: light;
--rf-blue: #0d6efd;
--rf-blue-2: #4da3ff;
--rf-blue-soft: #eef6ff;
--rf-yellow: #ffe58a;
--rf-yellow-strong: #ffd24d;
--rf-yellow-soft: #fff8dc;
--rf-ink: #1f2937;
--rf-muted: #667085;
--rf-border: #d7dde8;
--rf-surface: #ffffff;
--rf-page: #f3f6fb;
--rf-danger: #a94747;
--rf-danger-dark: #8f3838;
--rf-danger-soft: #fff1f1;
--rf-header-height: 124px;
--bs-primary: var(--rf-blue);
--bs-primary-rgb: 13, 110, 253;
--bs-success: var(--rf-blue-2);
--bs-success-rgb: 77, 163, 255;
--bs-info: var(--rf-blue);
--bs-info-rgb: 13, 110, 253;
--bs-warning: var(--rf-yellow);
--bs-warning-rgb: 255, 204, 0;
--bs-body-color: var(--rf-ink);
--bs-body-bg: var(--rf-page);
--m3-primary: #0d6efd;
--m3-on-primary: #ffffff;
--m3-secondary: #ffd24d;
--m3-on-secondary: #1f2937;
--m3-surface: #ffffff;
--m3-surface-container-low: #f8fafc;
--m3-surface-container: #f3f6fb;
--m3-surface-container-high: #eef2f7;
--m3-outline: #d7dde8;
--m3-outline-variant: #e5e7eb;
--m3-text: #111827;
--m3-muted: #667085;
--m3-radius-sm: 12px;
--m3-radius-md: 16px;
--m3-radius-lg: 22px;
--m3-radius-xl: 28px;
--m3-radius-pill: 999px;
--m3-motion-fast: 140ms;
--m3-motion-normal: 220ms;
--m3-ease-standard: cubic-bezier(.2, 0, 0, 1);
}
body {
background: var(--rf-page);
color: var(--rf-ink);
}
html,
body,
input,
select,
textarea,
button {
color-scheme: light;
}
.cabecalho-fixo {
background: var(--rf-surface) !important;
border-bottom: 3px solid var(--rf-yellow) !important;
box-shadow: 0 8px 24px rgba(13, 110, 253, 0.12) !important;
padding: 10px 16px 8px !important;
}
.container-fluid.pt-3 {
margin-top: var(--rf-header-height) !important;
}
#conteudo-abas {
border: 1px solid var(--rf-border);
border-radius: 8px !important;
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08) !important;
}
#pills-tab {
gap: 6px;
row-gap: 8px;
}
#pills-tab .btn {
background: var(--rf-blue) !important;
border-color: var(--rf-blue) !important;
color: #fff !important;
min-height: 36px;
line-height: 1.1;
box-shadow: none !important;
}
#pills-tab .btn.active,
#pills-tab .btn.show,
#pills-tab .btn:hover,
#pills-tab .btn:focus {
background: var(--rf-yellow) !important;
border-color: var(--rf-yellow-strong) !important;
color: #111827 !important;
}
.btn-primary {
--bs-btn-bg: var(--rf-blue);
--bs-btn-border-color: var(--rf-blue);
--bs-btn-hover-bg: #0b5ed7;
--bs-btn-hover-border-color: #0b5ed7;
--bs-btn-active-bg: #0a58ca;
--bs-btn-active-border-color: #0a58ca;
}
.btn-success {
--bs-btn-bg: var(--rf-blue-2);
--bs-btn-border-color: var(--rf-blue-2);
--bs-btn-hover-bg: var(--rf-blue);
--bs-btn-hover-border-color: var(--rf-blue);
--bs-btn-active-bg: #0a58ca;
--bs-btn-active-border-color: #0a58ca;
}
.btn-info {
--bs-btn-color: #fff;
--bs-btn-bg: var(--rf-blue);
--bs-btn-border-color: var(--rf-blue);
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #0b5ed7;
--bs-btn-hover-border-color: #0b5ed7;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: #0a58ca;
--bs-btn-active-border-color: #0a58ca;
}
.btn-info.text-dark {
color: #fff !important;
}
.btn-danger {
--bs-btn-bg: var(--rf-danger);
--bs-btn-border-color: var(--rf-danger);
--bs-btn-hover-bg: var(--rf-danger-dark);
--bs-btn-hover-border-color: var(--rf-danger-dark);
--bs-btn-active-bg: var(--rf-danger-dark);
--bs-btn-active-border-color: var(--rf-danger-dark);
}
.btn-outline-danger {
--bs-btn-color: var(--rf-danger);
--bs-btn-border-color: var(--rf-danger);
--bs-btn-hover-bg: var(--rf-danger);
--bs-btn-hover-border-color: var(--rf-danger);
--bs-btn-hover-color: #fff;
}
.btn-outline-success {
--bs-btn-color: var(--rf-blue);
--bs-btn-border-color: var(--rf-blue);
--bs-btn-hover-bg: var(--rf-blue);
--bs-btn-hover-border-color: var(--rf-blue);
--bs-btn-hover-color: #fff;
--bs-btn-active-bg: var(--rf-blue);
--bs-btn-active-border-color: var(--rf-blue);
}
.btn-relatorio-pedido {
color: var(--rf-ink) !important;
border: 1px solid #9ca3af !important;
background: #fff !important;
font-weight: 700 !important;
box-shadow: none !important;
white-space: nowrap;
}
.btn-relatorio-pedido:hover,
.btn-relatorio-pedido:focus {
color: var(--rf-ink) !important;
background: #f8fafc !important;
border-color: #6b7280 !important;
}
.chat-mensagem {
border: 1px solid var(--rf-border);
border-radius: 8px;
padding: 10px 12px;
background: #fff;
margin-bottom: 8px;
}
.chat-mensagem.eu {
background: var(--rf-blue-soft);
border-color: rgba(13, 110, 253, 0.22);
}
.chat-mensagem.sistema {
background: #f8f9fa;
border-style: dashed;
}
.pendencia-vendedor-alert {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
border-left: 4px solid var(--rf-danger) !important;
}
.pendencia-vendedor-texto {
min-width: 0;
line-height: 1.35;
}
.pendencia-vendedor-alert .btn {
flex: 0 0 auto;
align-self: flex-start;
}
.lancamento-submit {
min-width: 220px;
}
.chat-badge-vazio {
background: #fff !important;
color: var(--rf-blue) !important;
border: 1px solid var(--rf-blue) !important;
}
.chat-badge-info {
background: var(--rf-blue) !important;
color: #fff !important;
border: 1px solid var(--rf-blue) !important;
}
.chat-mencoes-wrapper {
position: relative;
}
#chat-mencoes-sugestoes {
position: absolute;
left: 0;
right: 0;
bottom: 100%;
display: none;
max-height: 250px;
overflow-y: auto;
margin-bottom: 8px;
z-index: 1070;
}
.chat-mencao-item {
width: 100%;
border: 0;
border-bottom: 1px solid var(--rf-border);
background: #fff;
text-align: left;
padding: 10px 12px;
}
.chat-mencao-item:last-child {
border-bottom: 0;
}
.chat-mencao-item:hover,
.chat-mencao-item:focus {
background: var(--rf-blue-soft);
outline: none;
}
@media (max-width: 768px) {
.pendencia-vendedor-alert {
flex-direction: column;
align-items: stretch;
}
.pendencia-vendedor-alert .btn {
align-self: flex-end;
min-width: 128px;
}
.lancamento-submit {
width: 100%;
min-width: 0;
}
#chat-mencoes-sugestoes {
max-height: 220px;
}
}
@media (min-width: 992px) {
#modalChatPedido {
pointer-events: none;
}
#modalChatPedido.modal {
overflow: visible;
}
#modalChatPedido .modal-dialog {
pointer-events: auto;
position: fixed;
left: 18px;
bottom: 18px;
width: min(420px, 32vw);
max-width: 420px;
margin: 0;
transform: none !important;
}
#modalChatPedido .modal-content {
max-height: min(680px, calc(100vh - 36px));
}
#modalChatPedido .modal-body {
padding: 1rem !important;
}
#chat-pedido-lista {
height: min(360px, calc(100vh - 260px)) !important;
}
#modalChatPedido textarea {
min-height: 86px;
}
body.chat-flutuante-aberto {
overflow: auto !important;
padding-right: 0 !important;
}
#lista-logistica {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 0.75rem;
align-items: start;
}
#lista-logistica > .mb-3.position-sticky {
grid-column: 1 / -1;
}
#lista-logistica #leitor_qr {
font-size: 1rem !important;
padding-top: 0.65rem !important;
padding-bottom: 0.65rem !important;
}
#lista-logistica .logistica-card-desktop {
margin-bottom: 0 !important;
}
#lista-logistica .logistica-card-desktop .card-body {
padding: 0.85rem 1rem !important;
}
#lista-logistica .logistica-card-desktop .card-title {
font-size: 0.95rem !important;
}
#lista-logistica .logistica-card-desktop .card-text {
font-size: 1rem !important;
}
#lista-logistica .logistica-card-desktop .badge.fs-5 {
font-size: 0.9rem !important;
padding: 0.35rem 0.55rem !important;
}
#lista-logistica .logistica-card-desktop .alert {
padding: 0.45rem 0.6rem !important;
font-size: 0.82rem !important;
}
#lista-logistica .logistica-card-desktop .btn-lg {
font-size: 0.9rem !important;
padding: 0.5rem 0.75rem !important;
}
#lista-logistica .logistica-card-desktop .d-grid {
display: flex !important;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
gap: 0.5rem !important;
}
#lista-logistica .logistica-card-desktop .d-grid > .btn,
#lista-logistica .logistica-card-desktop .d-grid > .input-group,
#lista-logistica .logistica-card-desktop .d-grid > .alert {
width: auto !important;
min-width: 180px;
margin: 0 !important;
}
}
.text-primary,
.text-success {
color: var(--rf-blue) !important;
}
.border-primary,
.border-success {
border-color: var(--rf-blue) !important;
}
.bg-primary,
.bg-success {
background-color: var(--rf-blue) !important;
}
.bg-info {
background-color: #dff3ff !important;
}
.bg-danger {
background-color: var(--rf-danger) !important;
}
.text-danger {
color: var(--rf-danger-dark) !important;
}
.border-danger {
border-color: var(--rf-danger) !important;
}
.alert-danger {
--bs-alert-color: var(--rf-danger-dark);
--bs-alert-bg: var(--rf-danger-soft);
--bs-alert-border-color: rgba(169, 71, 71, 0.28);
}
.alert-success {
--bs-alert-color: #0755c7;
--bs-alert-bg: var(--rf-blue-soft);
--bs-alert-border-color: rgba(13, 110, 253, 0.28);
}
.table {
--bs-table-hover-bg: var(--rf-blue-soft);
border-color: var(--rf-border);
}
.table-light,
.table-primary,
.table-dark,
.table-warning,
.table-info,
.card-header.bg-primary {
background-color: var(--rf-blue-soft) !important;
color: var(--rf-blue) !important;
border-color: var(--rf-border) !important;
}
.table thead,
.table thead th {
background-color: var(--rf-blue-soft) !important;
color: var(--rf-blue) !important;
border-color: var(--rf-border) !important;
font-size: 0.82rem !important;
font-weight: 700 !important;
vertical-align: middle;
}
.table thead th {
padding: 0.55rem 0.6rem !important;
}
#tabela-sla thead th {
cursor: pointer;
user-select: none;
transition: background-color 140ms ease, color 140ms ease;
}
#tabela-sla thead th .sla-sort-indicator {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1rem;
margin-left: 0.35rem;
font-size: 0.78rem;
font-weight: 900;
color: rgba(17, 24, 39, 0.55);
}
#tabela-sla thead th.sort-ativa {
background: rgba(13, 110, 253, 0.12) !important;
color: #0b5ed7 !important;
}
#tabela-sla thead th.sort-ativa .sla-sort-indicator {
color: #0b5ed7;
}
.card {
border-radius: 8px !important;
border-color: var(--rf-border) !important;
}
/* ========================================== */
/* UI LIMPA - AREA CENTRAL */
/* Hierarquia por tipografia e icones, sem disputa de fundos. */
/* ========================================== */
#conteudo-abas {
background: #fff !important;
box-shadow: none !important;
}
#conteudo-abas .shadow,
#conteudo-abas .shadow-sm,
#conteudo-abas .shadow-lg {
box-shadow: none !important;
}
#conteudo-abas .card,
#conteudo-abas .alert,
#conteudo-abas .list-group-item,
#conteudo-abas .table-responsive,
#conteudo-abas .input-group,
#conteudo-abas .modal-content {
box-shadow: none !important;
border-color: var(--rf-border) !important;
}
#conteudo-abas .card,
#conteudo-abas .alert,
#conteudo-abas .bg-light,
#conteudo-abas .bg-white,
#conteudo-abas .table,
#conteudo-abas .table > :not(caption) > * > * {
background-color: #fff !important;
}
#conteudo-abas .table thead,
#conteudo-abas .table thead th,
#conteudo-abas .table-light,
#conteudo-abas .table-primary,
#conteudo-abas .table-dark,
#conteudo-abas .table-warning,
#conteudo-abas .table-info,
#conteudo-abas .card-header,
#conteudo-abas .card-header.bg-primary {
background-color: #f8fafc !important;
color: var(--rf-ink) !important;
border-color: var(--rf-border) !important;
font-weight: 700 !important;
}
#conteudo-abas .badge {
background: transparent !important;
color: var(--rf-ink) !important;
border: 1px solid var(--rf-border) !important;
box-shadow: none !important;
font-weight: 500 !important;
letter-spacing: 0;
text-transform: none;
}
#conteudo-abas button.badge {
cursor: pointer;
font-family: inherit;
}
#conteudo-abas button.badge:hover,
#conteudo-abas button.badge:focus {
background: #f8fafc !important;
border-color: #9ca3af !important;
}
#conteudo-abas .badge.text-white,
#conteudo-abas .badge.text-warning,
#conteudo-abas .badge.text-danger,
#conteudo-abas .badge.text-primary,
#conteudo-abas .badge.text-info {
color: var(--rf-ink) !important;
}
#conteudo-abas .text-primary,
#conteudo-abas .text-info,
#conteudo-abas .text-success,
#conteudo-abas .text-danger,
#conteudo-abas .text-warning {
color: var(--rf-ink) !important;
}
#conteudo-abas .badge.bg-primary,
#conteudo-abas .badge.bg-success,
#conteudo-abas .badge.bg-info,
#conteudo-abas .badge.bg-warning,
#conteudo-abas .badge.bg-danger,
#conteudo-abas .badge.bg-secondary,
#conteudo-abas .badge.bg-dark {
background: transparent !important;
}
#conteudo-abas .badge.etiqueta-forte,
#conteudo-abas .badge.chat-badge-info,
#conteudo-abas .badge.qualidade-alta,
#conteudo-abas .badge.nf-protagonista {
font-weight: 700 !important;
color: var(--rf-ink) !important;
border-color: var(--rf-border) !important;
}
#conteudo-abas .nf-protagonista {
color: var(--rf-ink) !important;
font-weight: 700 !important;
}
#conteudo-abas .badge.etiqueta-fraca,
#conteudo-abas .badge.chat-badge-vazio,
#conteudo-abas .badge.qualidade-baixa {
font-weight: 400 !important;
color: var(--rf-muted) !important;
}
#conteudo-abas .badge.qualidade-alerta {
font-weight: 700 !important;
color: var(--rf-ink) !important;
border-color: var(--rf-border) !important;
}
#conteudo-abas .badge.qualidade-critica {
font-weight: 700 !important;
color: var(--rf-ink) !important;
border-color: var(--rf-border) !important;
}
#conteudo-abas .btn {
box-shadow: none !important;
border-width: 1px !important;
font-weight: 700;
}
#conteudo-abas .btn-primary,
#conteudo-abas .btn-success,
#conteudo-abas .btn-info,
#conteudo-abas .btn-warning,
#conteudo-abas .btn-secondary {
background: #fff !important;
color: var(--rf-ink) !important;
border-color: #9ca3af !important;
}
#conteudo-abas .btn-danger,
#conteudo-abas .btn-outline-danger {
background: #fff !important;
color: var(--rf-ink) !important;
border-color: #9ca3af !important;
}
#conteudo-abas .btn-outline-primary,
#conteudo-abas .btn-outline-secondary,
#conteudo-abas .btn-outline-warning,
#conteudo-abas .btn-outline-info,
#conteudo-abas .btn-outline-success {
background: #fff !important;
color: var(--rf-ink) !important;
border-color: #9ca3af !important;
}
#conteudo-abas .btn:hover,
#conteudo-abas .btn:focus {
background: #f8fafc !important;
}
.data-hora-ui {
color: var(--rf-muted) !important;
font-family: inherit;
font-size: 0.82rem;
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
}
.data-hora-ui .hora {
color: var(--rf-ink) !important;
font-size: 0.98rem;
font-weight: 800;
line-height: 1.05;
}
.data-hora-ui .data {
color: var(--rf-muted) !important;
font-size: 0.72rem;
font-weight: 600;
line-height: 1.1;
text-transform: lowercase;
}
.data-hora-ui.data-principal {
color: var(--rf-ink) !important;
font-weight: 700;
}
#conteudo-abas .alert-danger,
#conteudo-abas .alert-warning,
#conteudo-abas .alert-info,
#conteudo-abas .alert-success {
background: #fff !important;
color: var(--rf-ink) !important;
}
#conteudo-abas .text-uppercase,
#conteudo-abas [style*="text-transform: uppercase"] {
text-transform: none !important;
}
@media (prefers-color-scheme: dark) {
html,
body {
background: var(--rf-page) !important;
color: var(--rf-ink) !important;
}
.cabecalho-fixo,
#conteudo-abas,
#conteudo-abas .card,
#conteudo-abas .alert,
#conteudo-abas .list-group-item,
#conteudo-abas .bg-light,
#conteudo-abas .bg-white,
#conteudo-abas .table,
#conteudo-abas .table > :not(caption) > * > * {
background-color: #fff !important;
color: var(--rf-ink) !important;
border-color: var(--rf-border) !important;
}
#conteudo-abas .table thead,
#conteudo-abas .table thead th,
#conteudo-abas .card-header {
background-color: #f8fafc !important;
color: var(--rf-ink) !important;
border-color: var(--rf-border) !important;
}
.form-control,
.form-select,
.input-group-text,
textarea {
background-color: #fff !important;
color: var(--rf-ink) !important;
border-color: #9ca3af !important;
}
.form-control::placeholder,
textarea::placeholder,
#conteudo-abas .text-muted,
#conteudo-abas small {
color: var(--rf-muted) !important;
opacity: 1;
}
}
.form-control:focus,
.form-select:focus {
border-color: var(--rf-blue) !important;
box-shadow: 0 0 0 0.18rem rgba(13, 110, 253, 0.18) !important;
}
#tabela-credito-balcao tr {
border-color: var(--rf-blue) !important;
}
#tabela-credito-balcao td:nth-child(2) {
background-color: var(--rf-blue-soft) !important;
}
#tabela-credito-balcao td:nth-child(4) {
border-top-color: var(--rf-blue) !important;
}
.card-chegou-novo {
border-left-color: var(--rf-blue) !important;
background-color: var(--rf-blue-soft) !important;
}
#logistica .logistica-card-desktop.card-chegou-novo,
#logistica .logistica-card-desktop.card-chegou-novo .card-body {
background-color: #eef6ff !important;
}
#logistica .logistica-card-desktop.card-chegou-novo {
border-color: rgba(13, 110, 253, 0.35) !important;
border-left: 6px solid var(--rf-blue) !important;
}
@media (min-width: 769px) {
#pills-tab {
justify-content: center !important;
flex-wrap: wrap;
}
#pills-tab .btn {
font-size: 0.88rem;
padding: 0.48rem 0.75rem !important;
}
}
@media (max-width: 768px) {
:root {
--rf-header-height: 0px;
}
.cabecalho-fixo {
position: sticky !important;
padding: 8px 10px 6px !important;
}
.container-fluid.pt-3 {
margin-top: 0 !important;
padding-top: 0.35rem !important;
}
.cabecalho-fixo > .d-flex:first-child {
flex-wrap: nowrap !important;
gap: 6px;
margin-bottom: 8px !important;
align-items: center !important;
justify-content: space-between !important;
min-width: 0;
}
.cabecalho-fixo > .d-flex:first-child > .d-flex:first-child {
flex: 0 0 auto;
min-width: 0;
}
.cabecalho-fixo > .d-flex:first-child > .d-flex:first-child .d-flex {
gap: 5px !important;
align-items: center !important;
}
.cabecalho-fixo > .d-flex:first-child > .d-flex.align-items-center {
flex: 1 1 auto;
justify-content: flex-end;
min-width: 0;
gap: 4px;
}
.svg-log-p {
width: 92px !important;
min-width: 74px;
max-width: 96px;
}
.cabecalho-fixo .badge.rounded-pill {
font-size: 0.52rem !important;
line-height: 1;
padding: 0.2rem 0.38rem !important;
white-space: nowrap;
}
#btn-notificacao {
flex: 0 1 76px;
max-width: 76px;
font-size: 0.66rem !important;
line-height: 1.05;
text-align: center;
white-space: normal;
}
.cabecalho-fixo a[onclick="abrirManualMarkdown()"] {
flex: 0 0 auto;
font-size: 0.74rem !important;
margin-right: 0.25rem !important;
white-space: nowrap;
}
#nome-usuario {
flex: 0 1 auto;
max-width: 72px;
font-size: 0.74rem !important;
margin-right: 0.25rem !important;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cabecalho-fixo button[onclick="fazerLogout()"] {
flex: 0 0 auto;
font-size: 0.74rem !important;
padding: 0.22rem 0.52rem !important;
line-height: 1.2;
white-space: nowrap;
}
#pills-tab {
justify-content: flex-start !important;
flex-wrap: nowrap;
overflow-x: auto;
padding: 0 0 6px;
scrollbar-width: thin;
-webkit-overflow-scrolling: touch;
}
#pills-tab .nav-item {
flex: 0 0 auto;
}
#pills-tab .btn {
min-width: max-content;
font-size: 0.82rem !important;
padding: 0.5rem 0.72rem !important;
}
#conteudo-abas {
padding: 0.85rem !important;
border-radius: 8px !important;
}
}
@media (max-width: 430px) {
:root {
--rf-header-height: 0px;
}
.cabecalho-fixo .text-decoration-none.me-3 {
font-size: 0.68rem !important;
margin-right: 0.18rem !important;
}
.svg-log-p {
width: 78px !important;
min-width: 68px;
max-width: 82px;
}
.cabecalho-fixo .badge.rounded-pill {
font-size: 0.48rem !important;
padding: 0.16rem 0.3rem !important;
}
#nome-usuario {
max-width: 54px;
font-size: 0.68rem !important;
margin-right: 0.18rem !important;
}
.cabecalho-fixo button[onclick="fazerLogout()"] {
font-size: 0.68rem !important;
padding: 0.18rem 0.42rem !important;
}
}
@media (max-height: 780px) and (min-width: 900px) {
:root {
--rf-header-height: 112px;
}
.cabecalho-fixo {
padding-top: 8px !important;
padding-bottom: 6px !important;
}
#pills-tab .btn {
min-height: 32px;
font-size: 0.82rem;
padding: 0.38rem 0.64rem !important;
}
}
.rf-shell-v33 {
display: none;
}
body.rf-v33-ativo .rf-shell-v33 {
display: block;
}
body.rf-v33-ativo {
background:
radial-gradient(circle at top left, rgba(245, 158, 11, 0.12), transparent 28%),
linear-gradient(180deg, #f7f7f5 0%, #eef2f7 100%);
}
body.rf-v33-ativo #pills-tab {
position: absolute !important;
left: -9999px !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
}
body.rf-v33-ativo .cabecalho-fixo {
display: none !important;
}
body.rf-v33-ativo .container-fluid.pt-3 {
margin-top: 76px !important;
padding-top: 0.75rem !important;
}
body.rf-v33-ativo #conteudo-abas {
border-radius: 18px !important;
border: 0 !important;
box-shadow: none !important;
background: transparent !important;
}
body.rf-v33-ativo #conteudo-abas > .tab-pane > *:first-child {
margin-top: 0.15rem;
}
body.rf-v33-ativo #nome-usuario,
body.rf-v33-ativo #btn-notificacao {
visibility: hidden;
}
body.rf-v33-ativo .botao-whatsapp-dev,
body.rf-v33-ativo .btn-whatsapp-dev,
body.rf-v33-ativo .contato-dev-float,
body.rf-v33-ativo .whatsapp-float,
body.rf-v33-ativo #btn-contatar-dev,
body.rf-v33-ativo #botao-whatsapp-dev,
body.rf-v33-ativo #contato-dev-whatsapp {
display: none !important;
}
.rf-topbar-v33 {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 64px;
z-index: 1040;
display: flex;
align-items: center;
gap: 14px;
padding: 0 18px;
background: rgba(255,255,255,0.96);
border-bottom: 1px solid #e5e7eb;
box-shadow: 0 6px 20px rgba(15,23,42,0.06);
backdrop-filter: blur(10px);
}
.rf-topbar-logo {
width: 34px;
height: 34px;
object-fit: contain;
flex: 0 0 auto;
}
.rf-topbar-title-wrap {
min-width: 0;
flex: 1;
display: flex;
align-items: center;
}
.rf-topbar-title {
font-size: 1.05rem;
font-weight: 800;
color: #111827;
line-height: 1.1;
}
.rf-topbar-subtitle {
display: none !important;
}
.rf-topbar-actions {
display: flex;
align-items: center;
gap: 6px;
}
.rf-icon-btn {
width: 40px;
height: 40px;
border: 0;
border-radius: 999px;
background: transparent;
color: #1f2937;
font-size: 1.15rem;
font-weight: 800;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.rf-icon-btn:hover,
.rf-icon-btn:focus {
background: #f3f4f6;
}
.rf-user-btn {
border: 0;
border-radius: 999px;
background: #f3f4f6;
color: #1f2937;
padding: 8px 12px;
font-weight: 700;
max-width: 140px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rf-global-search-wrap {
position: fixed;
top: 70px;
left: 16px;
right: 16px;
z-index: 1039;
height: 48px;
display: flex;
align-items: center;
gap: 10px;
background: #ffffff;
border: 1px solid #d1d5db;
border-radius: 999px;
padding: 0 14px;
box-shadow: 0 10px 28px rgba(15,23,42,0.14);
}
.rf-global-search-wrap.is-hidden {
display: none;
}
.rf-global-search-input {
border: 0;
outline: 0;
flex: 1;
font-size: 1rem;
background: transparent;
}
.rf-search-close {
border: 0;
background: transparent;
font-size: 1.4rem;
cursor: pointer;
color: #6b7280;
}
.rf-drawer-backdrop-v33 {
position: fixed;
inset: 0;
background: rgba(15,23,42,0.38);
z-index: 1045;
}
.rf-drawer-backdrop-v33.is-hidden {
display: none;
}
.rf-drawer-v33 {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: min(320px, 86vw);
z-index: 1050;
background: #ffffff;
box-shadow: 18px 0 42px rgba(15,23,42,0.20);
transform: translateX(-105%);
transition: transform 180ms ease;
display: flex;
flex-direction: column;
}
.rf-drawer-v33.is-open {
transform: translateX(0);
}
.rf-drawer-header {
display: flex;
align-items: center;
gap: 12px;
padding: 18px;
border-bottom: 1px solid #e5e7eb;
}
.rf-drawer-logo {
width: 42px;
height: 42px;
object-fit: contain;
}
.rf-drawer-header small {
display: block;
color: #6b7280;
}
.rf-drawer-nav {
padding: 10px;
overflow-y: auto;
flex: 1;
}
.rf-drawer-nav button {
width: 100%;
border: 0;
background: transparent;
border-radius: 12px;
padding: 12px 14px;
text-align: left;
font-weight: 700;
color: #1f2937;
cursor: pointer;
}
.rf-drawer-nav button:hover,
.rf-drawer-nav button.active {
background: #eef4ff;
color: #0d6efd;
}
.rf-drawer-section {
padding: 16px 14px 6px;
color: #6b7280;
font-size: 0.72rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.rf-drawer-footer {
padding: 14px 18px;
border-top: 1px solid #e5e7eb;
color: #6b7280;
font-size: 0.78rem;
display: grid;
gap: 8px;
}
.rf-drawer-support {
width: 100%;
border: 1px solid #e5e7eb;
background: #ffffff;
color: #1f2937;
border-radius: 999px;
padding: 9px 12px;
font-weight: 800;
font-size: 0.82rem;
cursor: pointer;
}
.rf-drawer-support:hover {
background: #f3f4f6;
}
.rf-drawer-version {
display: block;
text-align: center;
font-weight: 700;
color: #6b7280;
}
.rf-user-menu-v33 {
position: fixed;
top: 58px;
right: 14px;
z-index: 1060;
min-width: 190px;
padding: 8px;
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 14px;
box-shadow: 0 14px 34px rgba(15,23,42,0.18);
}
.rf-user-menu-v33.is-hidden {
display: none;
}
.rf-user-menu-v33 button {
width: 100%;
border: 0;
background: transparent;
border-radius: 12px;
padding: 10px 12px;
text-align: left;
font-weight: 700;
color: #1f2937;
cursor: pointer;
}
.rf-user-menu-v33 button:hover,
.rf-user-menu-v33 button:focus {
background: #f3f4f6;
}
.rf-user-menu-v33 .text-danger {
color: #a94747 !important;
}
body.rf-v33-ativo .rf-topbar-v33 {
height: 64px;
background: rgba(255, 255, 255, 0.92);
border-bottom: 1px solid var(--m3-outline-variant);
box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
backdrop-filter: blur(14px);
}
body.rf-v33-ativo .rf-topbar-title-wrap {
display: flex;
align-items: center;
min-width: 0;
flex: 1;
}
body.rf-v33-ativo .rf-topbar-title {
font-size: 1.06rem;
font-weight: 850;
color: var(--m3-text);
line-height: 1.1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
body.rf-v33-ativo .rf-topbar-subtitle {
display: none !important;
}
body.rf-v33-ativo .rf-icon-btn {
border-radius: var(--m3-radius-pill);
transition:
background-color var(--m3-motion-fast) var(--m3-ease-standard),
transform var(--m3-motion-fast) var(--m3-ease-standard);
}
body.rf-v33-ativo .rf-icon-btn:hover,
body.rf-v33-ativo .rf-icon-btn:focus {
background: rgba(13, 110, 253, 0.08);
}
body.rf-v33-ativo .rf-icon-btn:active {
transform: scale(0.94);
}
body.rf-v33-ativo .rf-drawer-v33 {
border-radius: 0 var(--m3-radius-xl) var(--m3-radius-xl) 0;
background: var(--m3-surface);
box-shadow: 12px 0 32px rgba(15, 23, 42, 0.12);
}
body.rf-v33-ativo .rf-drawer-nav button {
border-radius: var(--m3-radius-pill);
min-height: 44px;
transition:
background-color var(--m3-motion-fast) var(--m3-ease-standard),
transform var(--m3-motion-fast) var(--m3-ease-standard);
}
body.rf-v33-ativo .rf-drawer-nav button.active {
background: rgba(13, 110, 253, 0.10);
color: var(--m3-primary);
}
body.rf-v33-ativo .rf-drawer-nav button:active {
transform: scale(0.98);
}
body.rf-v33-ativo .rf-drawer-support {
border-radius: var(--m3-radius-pill);
min-height: 44px;
transition:
background-color var(--m3-motion-fast) var(--m3-ease-standard),
transform var(--m3-motion-fast) var(--m3-ease-standard);
}
body.rf-v33-ativo .rf-drawer-support:active {
transform: scale(0.98);
}
body.rf-v33-ativo .rf-user-menu-v33 {
border-radius: var(--m3-radius-lg);
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
background: var(--m3-surface);
border: 1px solid var(--m3-outline-variant);
}
body.rf-v33-ativo .rf-global-search-wrap {
height: 54px;
top: 72px;
border-radius: var(--m3-radius-pill);
background: var(--m3-surface-container-low);
border: 1px solid transparent;
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.10);
transition:
transform var(--m3-motion-normal) var(--m3-ease-standard),
opacity var(--m3-motion-normal) var(--m3-ease-standard);
}
body.rf-v33-ativo .rf-global-search-wrap:not(.is-hidden) {
animation: rfSearchEnter 180ms var(--m3-ease-standard);
}
body.rf-v33-ativo .rf-global-search-input {
font-size: 0.98rem;
color: var(--m3-text);
}
body.rf-v33-ativo .rf-search-close {
border-radius: var(--m3-radius-pill);
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background-color var(--m3-motion-fast) var(--m3-ease-standard);
}
body.rf-v33-ativo .rf-search-close:hover {
background: rgba(13, 110, 253, 0.08);
}
body.rf-v33-ativo #conteudo-abas .card,
body.rf-v33-ativo .rf-lancamento-card,
body.rf-v33-ativo .table-responsive,
body.rf-v33-ativo .alert {
border-radius: var(--m3-radius-lg) !important;
border: 1px solid var(--m3-outline-variant) !important;
background: var(--m3-surface) !important;
box-shadow: none !important;
}
body.rf-v33-ativo #conteudo-abas .card-header {
border-radius: var(--m3-radius-lg) var(--m3-radius-lg) 0 0 !important;
background: var(--m3-surface-container-low) !important;
border-bottom: 1px solid var(--m3-outline-variant) !important;
}
body.rf-v33-ativo #conteudo-abas .btn {
border-radius: var(--m3-radius-pill) !important;
min-height: 38px;
padding-inline: 14px !important;
font-weight: 750;
transition:
background-color var(--m3-motion-fast) var(--m3-ease-standard),
border-color var(--m3-motion-fast) var(--m3-ease-standard),
transform var(--m3-motion-fast) var(--m3-ease-standard);
}
body.rf-v33-ativo #conteudo-abas .btn:active {
transform: scale(0.97);
}
body.rf-v33-ativo #conteudo-abas .btn-primary {
background: var(--m3-primary) !important;
color: var(--m3-on-primary) !important;
border-color: var(--m3-primary) !important;
}
body.rf-v33-ativo #conteudo-abas .btn-outline-primary,
body.rf-v33-ativo #conteudo-abas .btn-light {
background: var(--m3-surface-container-low) !important;
color: var(--m3-text) !important;
border-color: var(--m3-outline) !important;
}
body.rf-v33-ativo #conteudo-abas .badge {
border-radius: var(--m3-radius-pill) !important;
padding: 5px 10px !important;
background: var(--m3-surface-container-low) !important;
color: var(--m3-text) !important;
border: 1px solid var(--m3-outline-variant) !important;
font-weight: 650 !important;
line-height: 1.1;
}
body.rf-v33-ativo #conteudo-abas .badge.etiqueta-forte {
background: rgba(13, 110, 253, 0.08) !important;
border-color: rgba(13, 110, 253, 0.18) !important;
color: #0b5ed7 !important;
}
body.rf-v33-ativo .modal-content {
border-radius: var(--m3-radius-xl) !important;
border: 0 !important;
box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22) !important;
}
body.rf-v33-ativo .modal-header {
border-bottom: 1px solid var(--m3-outline-variant) !important;
background: var(--m3-surface-container-low);
border-radius: var(--m3-radius-xl) var(--m3-radius-xl) 0 0;
}
body.rf-v33-ativo .modal-footer {
border-top: 1px solid var(--m3-outline-variant) !important;
background: var(--m3-surface-container-low);
border-radius: 0 0 var(--m3-radius-xl) var(--m3-radius-xl);
}
body.rf-v33-ativo .table tbody tr {
transition:
background-color var(--m3-motion-fast) var(--m3-ease-standard),
transform var(--m3-motion-fast) var(--m3-ease-standard);
}
body.rf-v33-ativo .table tbody tr:hover {
background: rgba(13, 110, 253, 0.045) !important;
}
@keyframes rfSearchEnter {
from {
opacity: 0;
transform: translateY(-6px) scale(0.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.rf-swipe-feedback-v33 {
position: fixed;
left: 50%;
bottom: 24px;
transform: translateX(-50%);
z-index: 1100;
background: rgba(17, 24, 39, 0.88);
color: #ffffff;
padding: 9px 14px;
border-radius: 999px;
font-size: 0.82rem;
font-weight: 800;
pointer-events: none;
opacity: 0;
transition: opacity 160ms ease, transform 160ms ease;
}
.rf-swipe-feedback-v33.is-visible {
opacity: 1;
transform: translateX(-50%) translateY(-4px);
}
body.rf-v33-ativo .busca-local-v33-ocultar {
display: none !important;
}
@media (prefers-reduced-motion: reduce) {
body.rf-v33-ativo *,
body.rf-v33-ativo *::before,
body.rf-v33-ativo *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
@media (max-width: 768px) {
.rf-topbar-v33 {
height: 58px;
padding: 0 10px;
gap: 8px;
}
.rf-topbar-logo {
width: 30px;
height: 30px;
}
.rf-topbar-subtitle {
display: none;
}
.rf-user-btn {
max-width: 82px;
padding: 7px 9px;
font-size: 0.78rem;
}
.rf-icon-btn {
width: 36px;
height: 36px;
}
body.rf-v33-ativo .container-fluid.pt-3 {
margin-top: 64px !important;
}
.rf-global-search-wrap {
top: 64px;
left: 8px;
right: 8px;
}
.rf-user-menu-v33 {
top: 58px;
right: 8px;
left: 8px;
min-width: 0;
}
body.rf-v33-ativo #modalRotinasCredito .modal-dialog {
margin: 0.5rem;
}
body.rf-v33-ativo #modalRotinasCredito .modal-content {
border-radius: 16px;
}
body.rf-v33-ativo #modalRotinasCredito .nav-pills {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
gap: 0.5rem;
padding-bottom: 0.25rem;
}
body.rf-v33-ativo #modalRotinasCredito .nav-pills .nav-link {
white-space: nowrap;
}
body.rf-v33-ativo #tabela-vendedor tr,
body.rf-v33-ativo #tabela-credito tr,
body.rf-v33-ativo #tabela-faturista tr,
body.rf-v33-ativo #tabela-controle tr {
border-radius: var(--m3-radius-lg) !important;
border: 1px solid var(--m3-outline-variant) !important;
background: var(--m3-surface) !important;
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}
}
/* Classes geradas a partir de style="..." inline */
.rf-inline-001 { z-index: 9999; }
.rf-inline-002 { height: 100vh; }
.rf-inline-003 { width: 400px; border-radius: 15px; }
.rf-inline-004 { margin-top: 10%; display: inline-block; }
.rf-inline-005 { display: none; }
/* Blindagem de suporte/admin para validação global:
a aba Comercial não pode sumir por sobrescrita tardia de display. */
body[data-rf-role="suporte"] #nav-alcada,
body[data-rf-role="admin"] #nav-alcada {
display: block !important;
}
.rf-inline-006 { height: 100vh; display: none !important; }
.rf-inline-007 { position: fixed; bottom: 30px; right: 30px; width: 60px; height: 60px; font-size: 28px; display: flex; align-items: center; justify-content: center; z-index: 9999; text-decoration: none; border: 2px solid #ffffff; }
.rf-inline-008 { font-size: 0.55rem; }
.rf-inline-009 { display: none; background: transparent; }
.rf-inline-010 { font-size: 0.7rem; }
.rf-inline-011 { font-size: 0.75rem; }
.rf-inline-012 { display: none; font-size: 1.1rem; }
.rf-inline-013 { max-width: 300px; }
.rf-inline-014 { max-width: 250px; }
.rf-inline-015 { max-width: 140px; }
.rf-inline-016 { max-height: 450px; overflow-y: auto; }
.rf-inline-017 { position: sticky; top: 0; z-index: 1; }
.rf-inline-018 { font-size: 0.8rem; }
.rf-inline-019 { font-size: 0.9rem; }
.rf-inline-020 { max-width: 320px; }
.rf-inline-021 { max-width: 300px; width: 100%; }
.rf-inline-022 { max-width: 250px; width: 100%; }
.rf-inline-023 { max-width: 260px; }
.rf-inline-024 { max-height: 460px; overflow-y: auto; }
.rf-inline-025 { font-size: 0.86rem; }
.rf-inline-026 { max-width: 320px; width: 100%; }
.rf-inline-027 { max-height: 420px; overflow-y: auto; }
.rf-inline-028 { max-width: 150px; }
.rf-inline-029 { font-size: 0.85rem; }
.rf-inline-030 { width: 15%; }
.rf-inline-031 { width: 25%; }
.rf-inline-032 { min-width: 130px; }
.rf-inline-033 { cursor: pointer; }
.rf-inline-034 { display: none; font-size: 0.85rem; }
.rf-inline-035 { width: auto; }
.rf-inline-036 { height: 280px; width: 100%; }
.rf-inline-037 { height: 220px; width: 100%; }
.rf-inline-038 { min-width: 140px; }
.rf-inline-039 { min-width: 170px; }
.rf-inline-040 { font-size: 0.72rem; }
.rf-inline-041 { background-color: #f8f9fa; display: none; }
.rf-inline-042 { max-width: 160px; }
.rf-inline-043 { letter-spacing: 8px; font-family: monospace; }
.rf-inline-044 { max-width: 220px; }
.rf-inline-045 { font-size: 0.8rem; vertical-align: text-bottom; }
.rf-inline-046 { max-width: 150px; display: none; }
.rf-inline-047 { max-width: 130px; }
.rf-inline-048 { max-width: 120px; }
.rf-inline-049 { max-height: 400px; overflow-y: auto; }
.rf-inline-050 { max-width: 200px; }
.rf-inline-051 { max-height: 350px; overflow-y: auto; }
.rf-inline-052 { border-radius: 15px; }
.rf-inline-053 { border-radius: 15px 15px 0 0; }
.rf-inline-054 { border-radius: 0 0 15px 15px; }
.rf-inline-055 { height: 360px; overflow-y: auto; }
.rf-inline-056 { pointer-events: none; }
.rf-inline-057 { opacity: 0.5; pointer-events: none; transition: 0.3s; }
.rf-inline-058 { letter-spacing: 5px; }
.rf-inline-059 { z-index: 1065; }
.rf-inline-060 { opacity: 0.6; }
/* ========================================== */
/* 🎨 ESTILOS SPA MATERIAL 3 EXPRESSIVO */
/* ========================================== */
.rf-card-pedido {
border-radius: 24px !important; /* Cantos arredondados generosos Material 3 */
background: #ffffff;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05) !important;
border: 1px solid rgba(0, 0, 0, 0.08) !important;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.rf-card-pedido:hover {
transform: translateY(-4px) scale(1.01);
box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12) !important;
border-color: rgba(13, 110, 253, 0.25) !important;
}
.rf-card-pedido .card-header {
background-color: rgba(13, 110, 253, 0.03) !important;
border-bottom: 1px dashed rgba(0, 0, 0, 0.06) !important;
}
.rf-card-pedido .btn {
border-radius: 12px !important;
padding: 10px 16px !important;
font-weight: 700 !important;
transition: all 0.2s ease;
}
.rf-card-pedido .btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.rf-card-pedido .form-control, .rf-card-pedido .form-select {
border-radius: 10px !important;
padding: 8px 12px !important;
}
.rf-card-pedido .badge {
font-weight: 700;
padding: 6px 12px;
}
/* ==========================================================================
SPA Cards M3 Expressivo – Pedidos Operacionais
========================================================================== */
/* Container grid por aba */
.app-root-aba {
--pedido-card-radius: 16px;
--pedido-card-transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Coluna do card – responsividade */
.pedido-card-col {
--bs-col-xs: 12;
}
@media (min-width: 576px) {
#app-root-vendedor,
#app-root-credito,
#app-root-faturista,
#app-root-controle,
#app-root-credito-balcao {
--bs-cols: 1;
}
}
@media (min-width: 768px) {
#app-root-vendedor,
#app-root-credito,
#app-root-faturista,
#app-root-controle {
grid-template-columns: repeat(2, 1fr);
}
#app-root-credito-balcao {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1200px) {
#app-root-vendedor,
#app-root-controle {
grid-template-columns: repeat(3, 1fr);
}
}
/* Card principal */
.pedido-card {
border-radius: var(--pedido-card-radius) !important;
transition:
transform var(--pedido-card-transition),
box-shadow var(--pedido-card-transition);
overflow: hidden;
background: #fff;
animation: pedidoCardEntrada 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.pedido-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 28px rgba(13, 110, 253, 0.12) !important;
}
/* Animação de entrada dos cards */
@keyframes pedidoCardEntrada {
from {
opacity: 0;
transform: translateY(10px) scale(0.97);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* Stagger de animação por posição */
.pedido-card-col:nth-child(1) .pedido-card { animation-delay: 0.02s; }
.pedido-card-col:nth-child(2) .pedido-card { animation-delay: 0.05s; }
.pedido-card-col:nth-child(3) .pedido-card { animation-delay: 0.08s; }
.pedido-card-col:nth-child(4) .pedido-card { animation-delay: 0.11s; }
.pedido-card-col:nth-child(5) .pedido-card { animation-delay: 0.13s; }
.pedido-card-col:nth-child(n+6) .pedido-card { animation-delay: 0.15s; }
/* Header do card – cores por estado */
.pedido-card-header {
background: linear-gradient(135deg, #e8f0fe 0%, #f0f4ff 100%);
border-bottom: 1px solid rgba(13, 110, 253, 0.08);
min-height: 42px;
}
/* Estados visuais do card */
.pedido-card[data-estado="pendencia"] {
border-left: 4px solid #dc3545 !important;
}
.pedido-card[data-estado="pendencia"] .pedido-card-header {
background: linear-gradient(135deg, #fde8e8 0%, #fff0f0 100%);
}
.pedido-card[data-estado="alerta"] {
border-left: 4px solid #ffc107 !important;
}
.pedido-card[data-estado="alerta"] .pedido-card-header {
background: linear-gradient(135deg, #fff8e1 0%, #fffde7 100%);
}
.pedido-card[data-estado="ok"] {
border-left: 4px solid #198754 !important;
}
.pedido-card[data-estado="ok"] .pedido-card-header {
background: linear-gradient(135deg, #e8f5e9 0%, #f1f8f1 100%);
}
.pedido-card[data-estado="chegou"] {
border-left: 4px solid #0d6efd !important;
box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.15) !important;
}
.pedido-card[data-estado="chegou"] .pedido-card-header {
background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
}
/* Badge de status do card header */
.pedido-card-status-badge {
font-size: 0.72rem;
max-width: 160px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Nome do cliente */
.pedido-card .pedido-card-cliente {
font-size: 1.05rem;
color: #1a1a2e;
letter-spacing: -0.01em;
}
/* Estado vazio */
.pedido-card-vazio {
padding: 3rem 1rem;
text-align: center;
color: #6c757d;
}
.pedido-card-vazio .pedido-card-vazio-icon {
font-size: 2.5rem;
opacity: 0.4;
margin-bottom: 0.5rem;
}
/* Botões dentro dos cards */
.pedido-card .btn {
border-radius: 10px !important;
font-size: 0.875rem;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.pedido-card .btn:hover {
transform: translateY(-1px);
box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}
.pedido-card .btn:active {
transform: translateY(0);
}
/* Alertas dentro dos cards */
.pedido-card .alert {
border-radius: 10px !important;
font-size: 0.85rem;
}
/* Switches dentro dos cards */
.pedido-card .form-check-input {
cursor: pointer;
}
/* Select de status no Controle */
.pedido-card .form-select {
border-radius: 10px !important;
font-size: 0.875rem;
}
/* Hora no header – tipografia */
.pedido-card-hora {
font-size: 0.78rem;
font-variant-numeric: tabular-nums;
letter-spacing: 0.01em;
}
/* Número do pedido */
.pedido-card-numero {
font-size: 0.95rem;
font-weight: 700;
}
/* Editáveis inline */
.pedido-card-edit-nome,
.pedido-card-edit-numero {
cursor: pointer;
opacity: 0.5;
transition: opacity 0.15s;
font-size: 0.8rem;
}
.pedido-card-edit-nome:hover,
.pedido-card-edit-numero:hover {
opacity: 1;
}
/* ── Pill de Exceção no formulário de lançamento ── */
.pill-excecao-lanc {
align-items: center;
border: 1.5px solid #6c757d;
border-radius: 999px;
color: #6c757d;
font-size: 0.82rem;
font-weight: 600;
gap: 0.3rem;
padding: 0.35rem 0.85rem;
transition: background 0.18s, color 0.18s, border-color 0.18s, box-shadow 0.18s;
white-space: nowrap;
}
.pill-excecao-lanc:hover {
background: #f8f9fa;
border-color: #adb5bd;
color: #495057;
}
.pill-excecao-lanc.excecao-rascunho {
animation: pill-pulse 1.8s ease-in-out infinite;
background: #fff8e1;
border-color: #ffc107;
color: #856404;
}
.pill-excecao-lanc.excecao-ativa {
background: #ff6d00;
border-color: #e65100;
box-shadow: 0 0 0 3px rgba(255,109,0,.25);
color: #fff;
}
@keyframes pill-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(255,193,7,.5); }
50% { box-shadow: 0 0 0 5px rgba(255,193,7,0); }
}
/* Logística: fullwidth */
#app-root-logistica .pedido-card-col {
flex: 0 0 100%;
max-width: 100%;
}
#app-root-logistica .pedido-card {
max-width: 640px;
margin: 0 auto;
}
/* Acompanhamento faturamento: 2 colunas */
#app-root-faturista-acomp {
--bs-gutter-x: 1rem;
}