/* ================================================================
   OSMIO DESIGN SYSTEM v1.0
   ================================================================ */
:root {
    /* Cores Primárias */
    --osmio-primary: #0f172a;
    --osmio-secondary: #3b82f6;
    --osmio-accent: #10b981;
    --osmio-warning: #f59e0b;
    --osmio-danger: #ef4444;
    
    /* Superfícies e Fundos */
    --osmio-bg-main: #f8fafc;
    --osmio-bg-card: #ffffff;
    --osmio-sidebar-bg: #1e293b;
    
    /* Tipografia */
    --osmio-text-main: #1e293b;
    --osmio-text-muted: #64748b;
    --osmio-font-family: 'Gilroy-Regular', 'Inter', sans-serif;
    
    /* Efeitos */
    --osmio-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --osmio-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --osmio-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --osmio-radius: 12px;
    --osmio-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ================================================================
   FONTES — Família Gilroy (Local)
   ================================================================ */
@font-face {
    font-family: 'Gilroy-Bold';
    src: url('../fonts/Gilroy-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Gilroy-Medium';
    src: url('../fonts/Gilroy-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Gilroy-Regular';
    src: url('../fonts/Gilroy-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Gilroy-Light';
    src: url('../fonts/Gilroy-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

#login-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #808080;
    font-family: 'Gilroy-Regular', sans-serif;
    transition: opacity 0.4s ease;
}

#login-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.login-card {
    background: var(--osmio-bg-card);
    border: none;
    border-radius: var(--osmio-radius);
    padding: 48px 44px 44px;
    width: 100%;
    max-width: 420px;
    box-shadow: var(--osmio-shadow-lg);
    animation: loginFadeIn 0.5s ease forwards;
}

@keyframes loginFadeIn {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.login-logo-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 36px;
}

.login-logo-wrap img {
    max-height: 64px;
    max-width: 240px;
    object-fit: contain;
}

.login-titulo {
    text-align: center;
    color: #202124;
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 28px;
    font-family: 'Gilroy-Bold', sans-serif;
}

.login-form-group {
    margin-bottom: 16px;
}

.login-form-group label {
    display: block;
    color: #202124;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 6px;
    font-family: 'Gilroy-Bold', sans-serif;
}

.login-form-group input {
    width: 100%;
    background: #FFFFFF;
    border: 1px solid #202124;
    border-radius: 10px;
    color: #202124;
    font-size: 0.95rem;
    padding: 12px 16px;
    outline: none;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    font-family: 'Gilroy-Regular', sans-serif;
    box-sizing: border-box;
}

.login-form-group input::placeholder {
    color: rgba(32, 33, 36, 0.4);
    font-family: 'Gilroy-Light', sans-serif;
}

.login-form-group input:focus {
    border-color: #000A90;
    box-shadow: 0 0 0 3px rgba(0, 10, 144, 0.1);
}

.login-btn {
    width: 100%;
    margin-top: 8px;
    padding: 13px 16px;
    background: var(--osmio-secondary);
    color: #FFFFFF;
    border: none;
    border-radius: var(--osmio-radius);
    font-size: 0.95rem;
    font-family: 'Gilroy-Bold', sans-serif;
    cursor: pointer;
    transition: var(--osmio-transition);
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
    letter-spacing: 0.02em;
}

.login-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 10, 144, 0.3);
}

.login-btn:active {
    transform: translateY(0);
    opacity: 1;
}

.login-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

.login-erro {
    display: none;
    margin-top: 14px;
    padding: 10px 14px;
    background: rgba(220, 53, 69, 0.1);
    border: 1px solid rgba(220, 53, 69, 0.4);
    border-radius: 8px;
    color: #dc3545;
    font-size: 0.82rem;
    text-align: center;
    animation: loginShake 0.4s ease;
}

.login-erro.visivel {
    display: block;
}

@keyframes loginShake {

    0%,
    100% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-8px);
    }

    40% {
        transform: translateX(8px);
    }

    60% {
        transform: translateX(-5px);
    }

    80% {
        transform: translateX(5px);
    }
}

.login-rodape {
    margin-top: 28px;
    text-align: center;
    color: #202124;
    font-size: 0.72rem;
    opacity: 0.8;
    font-family: 'Gilroy-Light', sans-serif;
}

/* Spinner de carregamento no botão */
.login-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: loginSpin 0.7s linear infinite;
    margin-right: 8px;
    vertical-align: middle;
}

@keyframes loginSpin {
    to {
        transform: rotate(360deg);
    }
}

/* Banner de aviso de timeout */
#login-timeout-banner {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99998;
    padding: 10px 20px;
    background: rgba(234, 179, 8, 0.95);
    color: #1a1100;
    font-size: 0.82rem;
    font-weight: 600;
    text-align: center;
    animation: slideDown 0.3s ease;
}

#login-timeout-banner.visivel {
    display: block;
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}

html {
    height: 100%;
}

body {
    background-color: var(--osmio-bg-main);
    padding: 20px 20px 0 20px;
    margin: 0;
    height: 100%;
    font-size: 0.9rem;
    font-family: var(--osmio-font-family);
    color: var(--osmio-text-main);
    box-sizing: border-box;
}

/* Fonte base Gilroy-Regular */

/* Containers pais do view-home devem ter altura automatica para nao ocupar espaco fantasma */
#erp-main-content,
#erp-main-content>.container-fluid {
    height: auto;
    box-sizing: border-box;
}

h1,
h2,
h3,
b,
bold,
.fw-bold {
    font-family: 'Gilroy-Bold', sans-serif;
}

h4,
h5,
h6,
.card-title,
.modal-title,
.fw-medium {
    font-family: 'Gilroy-Medium', sans-serif;
}

.nav-tabs .nav-link,
.nav-tabs .nav-link.active {
    font-family: 'Gilroy-Medium', sans-serif;
}

.small,
.text-muted,
footer,
.help-text {
    font-family: 'Gilroy-Light', sans-serif;
}

::placeholder {
    font-family: 'Gilroy-Light', sans-serif;
}

.form-label {
    font-family: var(--osmio-font-family);
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--osmio-text-muted);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* --- OVERRIDES BOOTSTRAP PREMIUM --- */
.btn {
    border-radius: var(--osmio-radius);
    padding: 8px 16px;
    font-family: 'Gilroy-Medium', sans-serif;
    transition: var(--osmio-transition);
}

.btn-primary {
    background-color: var(--osmio-secondary);
    border-color: var(--osmio-secondary);
    box-shadow: 0 4px 6px rgba(59, 130, 246, 0.2);
}

.btn-primary:hover {
    background-color: #2563eb;
    border-color: #2563eb;
    transform: translateY(-1px);
    box-shadow: 0 6px 12px rgba(59, 130, 246, 0.3);
}

.btn-success {
    background-color: var(--osmio-accent);
    border-color: var(--osmio-accent);
}

.card {
    border-radius: var(--osmio-radius);
    border: none;
    box-shadow: var(--osmio-shadow-sm);
    background: var(--osmio-bg-card);
}

.modal-content {
    border-radius: var(--osmio-radius);
    border: none;
    box-shadow: var(--osmio-shadow-lg);
}

.modal-header {
    background-color: var(--osmio-primary);
    color: white;
    border-top-left-radius: var(--osmio-radius);
    border-top-right-radius: var(--osmio-radius);
}

.modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.table thead th {
    background-color: var(--osmio-primary);
    color: white;
    font-family: 'Gilroy-Bold', sans-serif;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 12px 10px;
    border: none;
}

/* Esta cor é cinza chumbo do texto dos rótulos de campos em todas as telas (#495057) */
.nav-tabs .nav-link.active {
    font-weight: bold;
    border-top: 3px solid #0d6efd;
    color: #0d6efd;
    background-color: white;
}

/* Estas cores são azul vivo da aba ativa (borda e texto) (#0d6efd) e branco de fundo da aba ativa (white) */
.readonly-field {
    background-color: #e9ecef;
    pointer-events: none;
    color: #6c757d;
}

/* Estas cores são cinza muito claro de fundo dos campos somente leitura (#e9ecef) e cinza médio do texto desses campos (#6c757d) */

/* Estilos de Validação */
.erro-input {
    background-color: #ffe6e6 !important;
    border-color: #dc3545 !important;
}

/* Estas cores são vermelho bem claro no fundo de campos com erro (#ffe6e6) e vermelho forte na borda do campo com erro (#dc3545) */
.erro-texto {
    color: #dc3545;
    font-size: 0.75rem;
    margin-left: 5px;
    font-weight: bold;
    display: none;
}

/* Esta cor é vermelho forte do texto de aviso “* Obrigatório” ao lado dos rótulos (#dc3545) */
.erro-visivel {
    display: inline;
}

.modal-ncm-container {
    font-family: 'Rawline', sans-serif;
}

.ncm-header {
    background-color: #405885;
    color: #ffffff;
    border-bottom: none;
    padding: 10px 16px;
}

/* Estas cores são azul petróleo do cabeçalho do modal de NCM (#405885) e branco do texto desse cabeçalho (#ffffff) */
.ncm-header-title {
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
}

.ncm-header-subtitle {
    font-size: 0.75rem;
    opacity: 0.9;
}

.ncm-search-row {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.ncm-search-label {
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 2px;
}

.ncm-search-input {
    flex-grow: 1;
}

.ncm-search-input input {
    font-size: 0.85rem;
}

.ncm-search-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 0;
}

.ncm-btn-search {
    background-color: #405885;
    color: #ffffff;
    border-color: #405885;
    padding: 4px 10px;
}

/* Estas cores são azul petróleo do botão “Buscar” no modal de NCM (#405885) e branco do ícone/texto desse botão (#ffffff) */
.ncm-btn-search i {
    font-size: 18px;
    line-height: 1;
}

.ncm-checkbox-palavra {
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 4px;
}

.ncm-panel {
    border: 1px solid #dee2e6;
    border-radius: 4px;
    background-color: #ffffff;
    position: relative;
}

/* Estas cores são cinza claro de borda dos painéis de NCM (#dee2e6) e branco de fundo desses painéis (#ffffff) */
.ncm-panel-header {
    background-color: #f5f6fa;
    border-bottom: 1px solid #dee2e6;
    padding: 6px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.78rem;
    font-weight: 600;
    color: #555555;
}

/* Estas cores são cinza azulado muito claro de fundo do cabeçalho de cada painel de NCM (#f5f6fa), cinza claro de borda inferior do painel (#dee2e6) e cinza escuro do texto do título do painel (#555555) */
.ncm-panel-title {
    text-transform: uppercase;
}

.ncm-panel-badge {
    font-size: 0.75rem;
    color: #777777;
}

/* Esta cor é cinza médio do texto de badges informativos ao lado dos títulos dos painéis de NCM (#777777) */
.ncm-results-list {
    max-height: 500px;
    overflow-y: auto;
    font-size: 0.8rem;
    transition: filter 0.2s ease, opacity 0.2s ease;
}

.ncm-result-item {
    padding: 6px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.ncm-result-item:nth-child(odd) {
    background-color: #f8f9fa;
}

/* Esta cor é cinza muito claro nas linhas ímpares da lista de resultados de NCM (#f8f9fa) */
.ncm-result-item:nth-child(even) {
    background-color: #ffffff;
}

/* Esta cor é branco nas linhas pares da lista de resultados de NCM (#ffffff) */
.ncm-result-item:hover {
    background-color: #e2e6f0;
}

/* Esta cor é cinza azulado claro ao passar o mouse sobre um resultado de NCM (#e2e6f0) */
.ncm-result-codigo {
    font-weight: 600;
    color: #405885;
    min-width: 90px;
}

/* Esta cor é azul petróleo do texto do código NCM exibido na coluna da esquerda (#405885) */
.ncm-result-descricao {
    flex-grow: 1;
    padding-left: 8px;
    color: #333333;
}

/* Esta cor é cinza bem escuro quase preto do texto da descrição da NCM (#333333) */
.ncm-results-blur {
    filter: blur(2px);
    opacity: 0.4;
    pointer-events: none;
}

.ncm-overlay {
    position: absolute;
    left: 0;
    right: 0;
    top: 32px;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.6);
    z-index: 5;
}

/* Esta cor é branco semitransparente do véu de carregamento sobre a área de resultados de NCM (rgba(255,255,255,0.6)) */
.ncm-overlay-content {
    text-align: center;
}

.ncm-overlay-spinner {
    width: 3rem;
    height: 3rem;
}

.ncm-side-list {
    font-size: 0.78rem;
    padding: 6px 10px;
    max-height: 150px;
    overflow-y: auto;
}

.ncm-side-item {
    padding: 2px 0;
    color: #555555;
}

/* Esta cor é cinza escuro do texto da lista lateral de seções e capítulos de NCM (#555555) */
.ncm-secao-titulo {
    margin-top: 16px;
    margin-bottom: 4px;
    font-weight: 700;
    color: #2f4c7e;
    font-size: 0.9rem;
}

/* Esta cor é azul escuro do título de cada seção lateral do modal de NCM (#2f4c7e) */
.ncm-secao-titulo:first-child {
    margin-top: 4px;
}

.ncm-nl-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 6px;
    border-radius: 3px;
    background-color: #f7a941;
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 700;
}

/* Estas cores são laranja do fundo do badge “NL” ao lado dos títulos (#f7a941) e branco do texto desse badge (#ffffff) */
.ncm-capitulo-linha {
    font-size: 0.85rem;
    margin-bottom: 2px;
}

.ncm-capitulo-link,
.ncm-capitulo-link:link,
.ncm-capitulo-link:visited,
.ncm-capitulo-link:hover,
.ncm-capitulo-link:active {
    color: #0077b6;
    text-decoration: none;
    margin-right: 4px;
}

/* Esta cor é azul médio do link de um capítulo NCM quando clicado (#0077b6) */
.ncm-valid {
    color: #198754;
}

/* Esta cor é verde do texto “NCM válido” e similares (#198754) */
.ncm-invalid {
    color: #dc3545;
}

/* Esta cor é vermelho forte do texto “NCM inválido” e mensagens de erro específicas (#dc3545) */
.ncm-valid-bg {
    background-color: #e6ffed !important;
}

/* Esta cor é verde muito claro de fundo para destacar linhas ou blocos considerados válidos (#e6ffed) */
.ncm-invalid-bg {
    background-color: #ffe6e6 !important;
}

/* Esta cor é vermelho bem claro de fundo para destacar linhas ou blocos considerados inválidos (#ffe6e6) */
.ncm-tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    table-layout: fixed;
}

.ncm-tabela th,
.ncm-tabela td {
    border-bottom: 1px solid #dee2e6;
    padding: 4px 8px;
    vertical-align: top;
}

/* Esta cor é cinza claro das linhas de divisão da tabela de NCM (#dee2e6) */
.ncm-tabela th {
    background-color: #f5f6fa;
}

/* Esta cor é cinza azulado muito claro usado no fundo do cabeçalho da tabela de NCM (#f5f6fa) */
.ncm-tabela tr.ncm-capitulo-linha td:nth-child(2),
.ncm-tabela tr.ncm-detalhe-linha td:nth-child(3),
.ncm-tabela tr.ncm-nivel-6 td:nth-child(4),
.ncm-tabela tr.ncm-nivel-8 td:nth-child(5) {
    white-space: nowrap;
}

.ncm-cadeia {
    margin-top: 2px;
    font-size: 0.84em;
}

.ncm-cadeia-item {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 4px;
}

.ncm-cadeia-codigo {
    font-weight: 600;
    white-space: nowrap;
}

.ncm-cadeia-descricao {
    font-weight: 400;
}

#modalNcm .modal-dialog {
    max-width: 1200px;
}

.col-telefone-lista {
    white-space: nowrap;
}

#ncm::placeholder {
    color: #adb5bd;
    opacity: 1;
}

/* Esta cor é cinza claro do texto de dica dentro do campo NCM no formulário de produto (#adb5bd) */
select.select-placeholder {
    color: #212529;
}

/* Esta cor é cinza quase preto do texto de selects com valor real selecionado (#212529) */
select.select-placeholder.placeholder-active {
    color: #adb5bd;
}

/* Esta cor é cinza claro quando o select está mostrando apenas “Selecione...” (#adb5bd) */
select.select-placeholder option {
    color: #212529;
}

/* Esta cor é cinza quase preto do texto das opções normais nos selects (valores reais selecionáveis) (#212529) */
select.select-placeholder option.option-placeholder {
    color: #adb5bd;
}

/* Esta cor é cinza claro da própria opção informativa “Selecione...” dentro da lista de opções (#adb5bd) */
th.sortable {
    position: relative;
    user-select: none;
}

th.sortable::after {
    content: '';
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.85rem;
    color: #ffffff;
}

th.sortable.sorted-asc::after {
    content: '↓';
}

th.sortable.sorted-desc::after {
    content: '↑';
}

/* [Edição: 21/06/2026] Paridade Visual Global — Fase 1.R: a seta de ordenação (::after right:6px) sobrepunha o texto
   em colunas alinhadas à direita (text-end). Reserva espaço à direita do rótulo. */
th.sortable.text-end {
    padding-right: 1.2rem;
}

.lanc-estoque-alerta-linha > td {
    background-color: #ffe6e6 !important;
}

.table-hover > tbody > tr.lanc-estoque-alerta-linha:hover > td {
    background-color: #ffd6d6 !important;
}

.lanc-estoque-alerta-seta {
    color: #dc3545;
    font-weight: 700;
}

/* [Edição: 30/05/2026 11:42:00]
   Motivo: Padronizar a coluna Status da lista de inventários sem badge/efeito visual.
   O que mudou: Fonte padrão na coluna status e cor da linha por status (ABERTO/FINALIZADO/CANCELADO). */
#tabela-inventarios td.inv-col-status {
    font-family: var(--osmio-font-family);
    font-weight: 400;
    animation: none !important;
    transition: none !important;
}

/* [Edição: 30/05/2026 12:00:00] Ajuste visual de status ABERTO/RECEBIDO em Inventário e Compras */
#tabela-inventarios tr.inv-status-aberto > td {
    color: #0d6efd !important;
}

#tabela-inventarios tr.inv-status-cancelado > td {
    color: #dc3545 !important;
}

/* [Edição: 30/05/2026 22:14:00]
   Motivo: Alinhar lista de Pedidos de Compra ao padrão visual de Conferência/Inventário.
   O que mudou: Coluna Status sem badge e cor aplicada na linha inteira por status. */
#tabela-pedidos-compra td.pc-col-status {
    font-family: var(--osmio-font-family);
    font-weight: 400;
    animation: none !important;
    transition: none !important;
}

#tabela-pedidos-compra tr.pc-status-aberto > td {
    color: #0d6efd !important;
}

#tabela-pedidos-compra tr.pc-status-cancelado > td {
    color: #dc3545 !important;
}

#tabela-pedidos-compra tr.pc-status-recebido > td {
    color: #202124 !important;
}

/* Seletor de status (Ativo/Inativo) */
.status-toggle {
    width: 50px;
    height: 24px;
    border-radius: 12px;
    border: none;
    position: relative;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.status-toggle .handle {
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    background-color: #ffffff;
    top: 3px;
    transition: left 0.2s ease;
}

.status-toggle.active {
    background-color: #28a745;
}

.status-toggle.active .handle {
    left: 29px;
}

.status-toggle.inactive {
    background-color: #dc3545;
}

.status-toggle.inactive .handle {
    left: 3px;
}

.status-toggle:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Calendário popup (pt-BR) */
.calendar-popup {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 20;
    width: 260px;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 8px;
    display: none;
}

.calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.calendar-header .cal-btn {
    border: none;
    background: #f1f3f5;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
}

.calendar-header .cal-title {
    font-weight: 600;
    font-size: 0.9rem;
}

.calendar-weekdays,
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.calendar-weekdays div {
    text-align: center;
    font-size: 0.75rem;
    color: #6c757d;
}

/* Esta cor é cinza médio do texto das abreviações dos dias da semana no cabeçalho do calendário (#6c757d) */

/* ================================================================
   DASHBOARD REESTRUTURADO — Painel de Ícones e Gavetas
   ================================================================ */

/* Layout Dashboard: Flexbox — logo centralizada, infos de acesso em position:fixed */
/* Espaço para compensar a nav-bar fixa nas telas internas e manter proporções das bordas cinzas */
div[id^="view-"]:not(#view-home) {
    padding-top: 60px;
    padding-bottom: 120px; /* 80px de borda visual + ~40px do rodapé fixo */
    padding-left: 60px;
    padding-right: 60px;
    margin: 0 auto;
}

/* Telas médias (tablets e janelas menores) */
@media (max-width: 992px) {
    div[id^="view-"]:not(#view-home) {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* Telas pequenas (celulares e janelas muito espremidas na vertical) */
@media (max-width: 768px) {
    div[id^="view-"]:not(#view-home) {
        padding-left: 10px;
        padding-right: 10px;
    }
}

#view-home {
    height: calc(100vh - 57px);
    /* viewport - padding-top body (20px) - rodapé (37px) */
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    position: relative; /* IMPORTANTE para as gavetas absolutas ficarem alinhadas corretamente */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    box-sizing: border-box;
    padding-top: 12px;
    /* Reserva espaço para: infos acesso (~60px) + rodapé (~37px) + margem (10px) */
    padding-bottom: 107px;
}

.dash-grid-container {
    width: 100%;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 0;
}

.dash-grid {
    display: flex;
    flex-wrap: wrap;
    gap: min(2vw, 2vh);
    justify-content: center;
    align-items: center;
    width: 100%;
}

.dash-btn {
    width: min(25vw, 15vh);
    aspect-ratio: 1 / 1;
    height: auto;
    background: var(--osmio-bg-card);
    border-radius: var(--osmio-radius);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--osmio-transition);
    border: 1px solid rgba(0, 0, 0, 0.03);
    box-shadow: var(--osmio-shadow-md);
}

.dash-btn:hover {
    transform: translateY(-8px);
    box-shadow: var(--osmio-shadow-lg);
    border-color: var(--osmio-secondary);
}

.dash-btn.active {
    border-color: var(--osmio-secondary);
    background: #f0f7ff;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.dash-btn img {
    width: 60%;
    height: 60%;
    object-fit: contain;
    margin-bottom: 5%;
}

.dash-btn span {
    font-family: 'Gilroy-Medium', sans-serif;
    /* Tamanho do texto acompanha a proporção da altura/largura da tela */
    font-size: min(2.5vw, 1.8vh);
    color: #212529;
    text-align: center;
    width: 100%;
    padding: 0 5%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Gaveta (Menu de Subsessões) */
.dash-drawer {
    display: none;
    flex-direction: column;
    width: auto;
    min-width: 280px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    border-radius: var(--osmio-radius);
    padding: 16px;
    position: absolute;
    z-index: 1000;
    box-shadow: var(--osmio-shadow-lg);
    border: 1px solid rgba(255, 255, 255, 0.5);
    transform: translateY(10px);
    transition: var(--osmio-transition);
    opacity: 0;
    pointer-events: none;
    gap: 10px;
}

.dash-drawer.open {
    display: flex;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.dash-sub-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 2px 3px;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
    text-align: left;
}

.dash-sub-btn:hover {
    background: rgba(59, 130, 246, 0.08);
    border-color: var(--osmio-secondary);
    transform: translateX(6px);
}

.dash-sub-btn img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.dash-sub-btn span {
    font-family: var(--osmio-font-family);
    font-size: 0.95rem;
    color: var(--osmio-text-main);
}

.calendar-day {
    text-align: center;
    padding: 6px 0;
    cursor: pointer;
    border-radius: 4px;
    font-size: 0.85rem;
}

.calendar-day:hover {
    background: #e9ecef;
}

/* Esta cor é cinza muito claro usado como fundo do dia quando o mouse está sobre ele (#e9ecef) */
.calendar-day.disabled {
    color: #adb5bd;
    cursor: not-allowed;
}

/* Esta cor é cinza claro do número dos dias desabilitados no calendário (#adb5bd) */
.calendar-day.selected {
    background: #0d6efd;
    color: #fff;
}

/* Estas cores são azul vivo de fundo do dia selecionado no calendário (#0d6efd) e branco do número desse dia (#fff) */
.manufatura-lista-produtos {
    max-height: 68vh;
    overflow-y: auto;
}

.manufatura-lista-produtos tbody tr.table-primary td {
    background-color: #e7f1ff;
}

.manufatura-ficha-vazia {
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #6c757d;
}

.manufatura-ficha-produto-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.manufatura-ficha-produto-box {
    border: 1px solid #dee2e6;
    border-radius: 6px;
    background: #f8f9fa;
    padding: 10px 12px;
}

.manufatura-ficha-produto-box .titulo {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    color: #6c757d;
    margin-bottom: 2px;
}

.manufatura-ficha-produto-box .valor {
    display: block;
    font-weight: 600;
    color: #212529;
}

.manufatura-item-componente {
    min-width: 260px;
}

.manufatura-item-acoes {
    width: 70px;
}

.manufatura-componente-busca-box {
    border: 1px solid #dee2e6;
    border-radius: 6px;
    background: #f8f9fa;
    padding: 12px;
}

.manufatura-resumo-componentes {
    font-size: 0.85rem;
    color: #495057;
}

.manufatura-resumo-operacional {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.manufatura-resumo-operacional .box {
    border: 1px solid #dee2e6;
    border-radius: 6px;
    background: #fff;
    padding: 10px 12px;
}

.manufatura-resumo-operacional .titulo {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    color: #6c757d;
    margin-bottom: 2px;
}

.manufatura-resumo-operacional .valor {
    display: block;
    font-weight: 600;
    color: #212529;
}

.manufatura-item-sem-custo td {
    background-color: #fff3cd;
}

@media (max-width: 992px) {
    .manufatura-ficha-produto-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .manufatura-resumo-operacional {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .manufatura-ficha-produto-grid {
        grid-template-columns: 1fr;
    }
}

/* [Edição: 22/04/2026 18:30:00] MAN3.3 — Kanban de Produção */
.kanban-col {
    min-width: 200px;
    flex: 1 1 0%;
    display: flex;
    flex-direction: column;
}
.kanban-col-body {
    background: #f1f3f5;
    border: 1px solid #dee2e6;
    border-top: none;
    border-radius: 0 0 6px 6px;
    padding: 6px;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
    max-height: 65vh;
}
.kanban-card {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 8px 10px;
    cursor: pointer;
    transition: box-shadow 0.2s;
    font-size: 0.82rem;
}
.kanban-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.kanban-card .op-id {
    font-weight: 700;
    color: #0f172a;
}
.kanban-card .op-produto {
    color: #495057;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kanban-card .op-meta {
    font-size: 0.72rem;
    color: #6c757d;
    margin-top: 4px;
}

/* Layout Dashboard: Logo Abaixo e Acesso Magnificado */
.dash-logo-footer-wrap {
    flex: 1 1 0%;
    /* Ocupa todo o espaço central disponível */
    min-height: 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: min(1vw, 1vh);
}

.dash-logo-main {
    max-height: 50%;
    /* Ocupa até 100% da altura do container (limitado pelo flex pai) */
    max-width: 60%;
    /* Máximo de 60% da largura da tela */
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

/* Informações de Acesso: posição FIXA acima do rodapé — independente da hierarquia de containers */
.dash-access-info {
    position: fixed;
    /* Fixo na viewport, independente do layout pai */
    bottom: 47px;
    /* Acima do rodapé fixo (~37px) + margem (10px) */
    left: 0;
    right: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5vw;
    font-family: 'Gilroy-Medium', sans-serif;
    color: #212529;
    text-transform: uppercase;
    font-size: min(3.8vw, 4.5vh);
    white-space: nowrap;
    padding: 6px 0;
    z-index: 100;
    /* Acima do conteúdo, abaixo do rodapé (z-index 1050) */
}

.dash-access-time {
    font-family: 'Courier New', monospace;
    font-weight: bold;
}

.dash-access-user {
    /* Divisor lateral que é amarrado por medida reativa viewport (vw) */
    border-left: min(0.3vw, 3px) solid #212529;
    padding-left: 1.5vw;
}


.erp-global-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #F0F2F5;
    /* Mesma cor da caixa de login */
    border-top: 1px solid #202124;
    padding: 12px;
    text-align: center;
    color: #202124;
    font-size: 0.72rem;
    font-family: 'Gilroy-Light', sans-serif;
    z-index: 1050;
}

/* --- BARRA DE NAVEGAÇÃO SUPERIOR (Subviews) --- */
#erp-nav-bar {
    position: fixed;
    top: 15px;
    left: 20px;
    z-index: 1060; /* Acima de quase tudo */
    display: none; /* Controlado via JS mostrarView() */
    gap: 12px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
    padding: 6px 12px;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

#erp-nav-bar button.nav-btn-icon {
    background: transparent;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: #212529; /* Cor monocromática solicitada */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    border-radius: 50%;
}

#erp-nav-bar button.nav-btn-icon:hover {
    color: #0d6efd;
    background: rgba(13, 110, 253, 0.1);
    transform: translateY(-2px);
}

#erp-nav-bar button.nav-btn-icon svg {
    transition: transform 0.2s ease;
}

#erp-nav-bar button.nav-btn-icon:active {
    transform: scale(0.9);
}