/* ========================================================== HAS SUPPLY 1.0 SISTEMA INTEGRADO DE GESTÃO ARQUIVO: style.css IDENTIDADE VISUAL: AZUL OFICIAL: #004AAB INTERFACE CORPORATIVA RESPONSIVA TEMA CLARO / ESCURO IMPRESSÃO PROFISSIONAL A4 ========================================================== */ /* ========================================================== 01. VARIÁVEIS ========================================================== */ :root { /* IDENTIDADE DA MARCA */ --has-blue: #004AAB; --has-blue-hover: #003B8A; --has-blue-dark: #002F70; --has-blue-deep: #071B38; --has-blue-light: #1673DA; --has-blue-soft: #EAF3FF; --has-blue-border: #D0E3F8; /* ESTADOS */ --success: #118764; --success-bg: #E6F6EF; --warning: #BE7B15; --warning-bg: #FFF4DE; --danger: #CE4051; --danger-bg: #FFF0F2; /* SUPERFÍCIES */ --bg: #F4F7FC; --surface: #FFFFFF; --surface-secondary: #F8FAFD; --surface-hover: #EEF4FC; /* TEXTOS */ --text: #18283F; --text-secondary: #65758B; --text-muted: #91A0B3; /* BORDAS */ --border: #E0E9F3; --border-strong: #CCD9E8; /* MENU LATERAL */ --sidebar-bg: #071B38; --sidebar-hover: #112D53; --sidebar-active: #17447C; --sidebar-text: #B4C8E1; /* SOMBRAS */ --shadow-sm: 0 3px 14px rgba(18, 43, 78, .04); --shadow-md: 0 12px 35px rgba(18, 43, 78, .09); --shadow-lg: 0 25px 70px rgba(5, 25, 55, .23); /* BORDAS ARREDONDADAS */ --radius-sm: 8px; --radius-md: 11px; --radius-lg: 17px; --radius-xl: 22px; /* DIMENSÕES */ --sidebar-width: 264px; --sidebar-mini: 80px; --topbar-height: 78px; /* TIPOGRAFIA */ --font: "Inter", Arial, sans-serif; /* TRANSIÇÕES */ --transition: .24s ease; } /* ========================================================== 02. TEMA ESCURO ========================================================== */ body.dark-mode { color-scheme: dark; --bg: #0B1526; --surface: #14233A; --surface-secondary: #192B45; --surface-hover: #233B5B; --text: #ECF4FF; --text-secondary: #A7B9D1; --text-muted: #829BB9; --border: #2A3E58; --border-strong: #405775; --has-blue-soft: #16395F; --has-blue-border: #245385; --success: #48C79A; --success-bg: #153D35; --warning: #F1BF61; --warning-bg: #45371F; --danger: #FB7787; --danger-bg: #482A32; --sidebar-bg: #061429; --sidebar-hover: #122B4C; --sidebar-active: #17447C; --shadow-sm: 0 3px 14px rgba(0, 0, 0, .12); --shadow-md: 0 12px 35px rgba(0, 0, 0, .22); --shadow-lg: 0 25px 70px rgba(0, 0, 0, .45); } /* ========================================================== 03. RESET GLOBAL ========================================================== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; min-height: 100vh; font-family: var(--font); font-size: 13px; line-height: 1.6; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; transition: background var(--transition), color var(--transition); } button, input, select, textarea { font: inherit; } button { cursor: pointer; } button:disabled { opacity: .55; cursor: not-allowed; } input, select, textarea { color: var(--text); } input::placeholder, textarea::placeholder { color: var(--text-muted); } img { max-width: 100%; } a { color: inherit; text-decoration: none; } [hidden] { display: none !important; } :focus-visible { outline: 3px solid var(--has-blue-light); outline-offset: 3px; } ::selection { color: #FFFFFF; background: var(--has-blue); } /* ========================================================== 04. BARRA DE ROLAGEM ========================================================== */ ::-webkit-scrollbar { width: 9px; height: 9px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #ADBED2; border: 2px solid transparent; border-radius: 20px; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background-color: #8299B5; } /* ========================================================== 05. ANIMAÇÕES ========================================================== */ @keyframes aparecer { from { opacity: 0; } to { opacity: 1; } } @keyframes subir { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes ampliar { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: scale(1); } } @keyframes deslizar { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: translateX(0); } } @keyframes carregamento { from { transform: translateX(-120%); } to { transform: translateX(330%); } } /* ========================================================== 06. BOTÕES GERAIS ========================================================== */ .btn-primario, .btn-secundario, .btn-perigo, .btn-login { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 43px; padding: 10px 18px; border: 1px solid transparent; border-radius: 9px; font-size: 12px; font-weight: 700; line-height: 1.4; text-align: center; transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition); } .btn-primario { background: var(--has-blue); color: #FFFFFF; } .btn-primario:hover:not(:disabled) { background: var(--has-blue-hover); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(0, 74, 171, .22); } .btn-secundario { color: var(--text); background: var(--surface); border-color: var(--border-strong); } .btn-secundario:hover:not(:disabled) { color: var(--has-blue-light); background: var(--surface-hover); border-color: var(--has-blue-light); } .btn-perigo { background: #CE4051; color: #FFFFFF; } .btn-perigo:hover:not(:disabled) { background: #AC3141; } .btn-texto { display: inline-flex; align-items: center; justify-content: center; padding: 10px; background: transparent; color: var(--text-secondary); border: none; font-weight: 600; } .btn-texto:hover { color: var(--has-blue-light); } .btn-icone { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: transparent; color: var(--text-secondary); border: 1px solid transparent; border-radius: 10px; transition: var(--transition); } .btn-icone:hover { background: var(--surface-hover); color: var(--has-blue-light); } .btn-fechar-modal { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex-shrink: 0; background: var(--surface-secondary); color: var(--text-secondary); border: 1px solid var(--border); border-radius: 10px; font-size: 16px; transition: var(--transition); } .btn-fechar-modal:hover { color: var(--danger); background: var(--danger-bg); } button i { pointer-events: none; } /* ========================================================== 07. FORMULÁRIOS ========================================================== */ .campo { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin-bottom: 18px; } .campo label { font-size: 12px; font-weight: 700; color: var(--text-secondary); } .campo input, .campo select, .campo textarea, .pesquisa input, .filtros-barra select { width: 100%; min-width: 0; min-height: 44px; padding: 10px 14px; background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); border-radius: 9px; outline: none; font-size: 12px; transition: border-color var(--transition), box-shadow var(--transition), background var(--transition); } .campo textarea { min-height: 92px; resize: vertical; } .campo input:focus, .campo select:focus, .campo textarea:focus, .pesquisa input:focus, .filtros-barra select:focus { border-color: var(--has-blue-light); box-shadow: 0 0 0 3px rgba(0, 74, 171, .10); } .campo input:disabled, .campo select:disabled { background: var(--surface-secondary); opacity: .65; } .campo small { color: var(--text-muted); font-size: 11px; } .form-grid { display: grid; gap: 18px; margin-bottom: 18px; } .duas-colunas { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form-grid .campo { margin-bottom: 0; } .acoes-formulario { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 20px; } .divisor-formulario { height: 1px; margin: 26px 0; background: var(--border); } input[type="checkbox"], input[type="radio"] { accent-color: var(--has-blue); } /* ========================================================== 08. CAMPOS MONETÁRIOS ========================================================== */ .input-moeda { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; } .campo-valor-calculado { display: flex; align-items: center; justify-content: flex-end; min-height: 44px; padding: 10px 15px; background: var(--has-blue-soft); border: 1px solid var(--has-blue-border); border-radius: 9px; } .campo-valor-calculado output { color: var(--has-blue-light); font-size: 16px; font-weight: 900; font-variant-numeric: tabular-nums; } .totalizador { display: flex; align-items: center; justify-content: flex-end; gap: 25px; padding: 19px 0; margin-bottom: 17px; border-bottom: 1px solid var(--border); } .totalizador span { color: var(--text-secondary); font-size: 11px; font-weight: 800; } .totalizador strong { color: var(--has-blue-light); font-size: 22px; font-weight: 900; font-variant-numeric: tabular-nums; } /* ========================================================== 09. LOGIN - ESTRUTURA ========================================================== */ .tela-login { display: flex; align-items: center; justify-content: center; min-height: 100vh; min-height: 100dvh; padding: 30px 18px; position: relative; overflow: hidden; background: radial-gradient( circle at 17% 18%, rgba(0, 102, 220, .22), transparent 36% ), linear-gradient( 135deg, #06152B, #0A254D 60%, #05142A ); } .tela-login::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient( rgba(255, 255, 255, .025) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255, 255, 255, .025) 1px, transparent 1px ); background-size: 45px 45px; pointer-events: none; } .login-container { width: 100%; max-width: 1060px; position: relative; z-index: 1; animation: subir .55s ease; } .login-layout { display: grid; grid-template-columns: 1fr 1fr; min-height: 560px; overflow: hidden; background: #FFFFFF; border-radius: 22px; box-shadow: 0 30px 90px rgba(0, 0, 0, .28); } /* ========================================================== 10. LOGIN - PAINEL AZUL ========================================================== */ .login-visual { display: flex; flex-direction: column; justify-content: space-between; min-height: 560px; padding: 42px; position: relative; overflow: hidden; background: #004AAB; color: #FFFFFF; } .login-visual::before { content: ""; position: absolute; width: 420px; height: 420px; right: -170px; bottom: -180px; border: 1px solid rgba(255, 255, 255, .15); border-radius: 50%; box-shadow: 0 0 0 45px rgba(255, 255, 255, .035), 0 0 0 95px rgba(255, 255, 255, .025); } .login-visual-marca { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; position: relative; z-index: 1; } .logo-login-principal { display: block; width: 215px; max-width: 100%; object-fit: contain; } .marca-legenda { color: rgba(255, 255, 255, .75); font-size: 9px; font-weight: 800; letter-spacing: 1.8px; } .login-visual-conteudo { position: relative; z-index: 1; max-width: 390px; animation: deslizar .65s ease; } .sobretitulo { font-size: 10px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; } .login-visual-conteudo .sobretitulo { color: #B8DBFF; margin-bottom: 16px; } .login-visual-conteudo h1 { font-size: clamp(29px, 3.5vw, 42px); font-weight: 900; line-height: 1.2; letter-spacing: -1.4px; margin: 0 0 20px; } .login-visual-conteudo > p:not(.sobretitulo) { font-size: 13px; line-height: 1.9; color: #E0EEFF; } .login-visual-linha { width: 60px; height: 4px; margin-top: 27px; background: #FFFFFF; border-radius: 10px; } .login-visual-rodape { position: relative; z-index: 1; color: rgba(255, 255, 255, .7); font-size: 10px; } /* ========================================================== 11. LOGIN - FORMULÁRIO ========================================================== */ .login-card { display: flex; flex-direction: column; justify-content: center; padding: 60px 56px; background: #FFFFFF; color: #17263C; } .login-cabecalho { margin-bottom: 31px; } .etiqueta-login { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; margin-bottom: 21px; background: #EAF3FF; color: #004AAB; border-radius: 8px; font-size: 9px; font-weight: 800; letter-spacing: 1px; } .login-cabecalho h2 { font-size: 29px; font-weight: 900; letter-spacing: -1px; margin: 0 0 7px; } .login-cabecalho p { color: #7C8DA3; font-size: 12px; } .login-card .campo { margin-bottom: 20px; } .login-card .campo label { color: #394B62; } .campo-icone { position: relative; } .campo-icone > i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #8C9FB6; } .login-card .campo-icone input { min-height: 48px; padding-left: 43px; padding-right: 43px; background: #F9FBFE; color: #17263C; border-color: #D6E2F0; } .login-card .campo-icone input:focus { background: #FFFFFF; border-color: #004AAB; } .btn-ver-senha { position: absolute; top: 50%; right: 7px; transform: translateY(-50%); width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: transparent; color: #8598AF; border: none; } .btn-ver-senha:hover { color: #004AAB; } .btn-login { width: 100%; min-height: 51px; justify-content: space-between; padding: 0 20px; margin-top: 8px; background: #004AAB; color: #FFFFFF; font-size: 13px; } .btn-login:hover { background: #003B8A; transform: translateY(-1px); } .mensagem-erro { padding: 12px; margin-bottom: 15px; background: #FFF0F2; color: #C63145; border-radius: 8px; font-size: 12px; } .login-rodape { margin-top: 27px; text-align: center; color: #98A6B6; font-size: 10px; } .login-marca-mobile { display: none; } /* ========================================================== 12. SELEÇÃO DE PERFIL ========================================================== */ .tela-selecao-usuario { display: flex; align-items: center; justify-content: center; min-height: 100vh; min-height: 100dvh; padding: 35px 20px; background: radial-gradient( circle at 80% 20%, rgba(0, 74, 171, .25), transparent 40% ), linear-gradient( 135deg, #06152B, #0B2851 ); color: #FFFFFF; } .selecao-container { width: 100%; max-width: 800px; text-align: center; animation: subir .5s ease; } .selecao-logo { display: block; width: 135px; height: 135px; object-fit: contain; margin: 0 auto 22px; border-radius: 16px; } .selecao-cabecalho .sobretitulo { color: #80BAFF; margin-bottom: 10px; } .selecao-cabecalho h1 { font-size: clamp(23px, 4vw, 34px); font-weight: 900; letter-spacing: -.9px; margin: 0 0 10px; } .selecao-cabecalho > p:last-child { color: #AEC5E0; } .lista-perfis-usuarios { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 18px; margin: 38px 0 27px; } .perfil-usuario { display: flex; flex-direction: column; align-items: center; gap: 12px; min-height: 175px; padding: 26px 16px; background: rgba(255, 255, 255, .06); color: #FFFFFF; border: 1px solid rgba(255, 255, 255, .13); border-radius: 15px; transition: var(--transition); } .perfil-usuario:hover { background: rgba(21, 115, 230, .17); border-color: #6FAFFF; transform: translateY(-3px); } .perfil-avatar { width: 65px; height: 65px; display: flex; align-items: center; justify-content: center; background: #004AAB; border-radius: 16px; font-size: 24px; } .perfil-usuario strong { font-size: 13px; font-weight: 800; } .perfil-usuario small { font-size: 11px; color: #AEC4DF; } .tela-selecao-usuario .btn-secundario { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2); color: #FFFFFF; } .tela-selecao-usuario .btn-texto { display: block; margin: 17px auto 0; color: #AFC6E0; } /* ========================================================== 13. ANIMAÇÃO DE BOAS-VINDAS ========================================================== */ .tela-boas-vindas { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; background: radial-gradient( circle, #0758B9, #004AAB 50%, #002B65 ); color: #FFFFFF; } .boas-vindas-conteudo { width: 100%; max-width: 600px; padding: 25px; text-align: center; animation: ampliar .7s ease; } .boas-vindas-marca { display: block; width: 190px; height: 190px; object-fit: contain; margin: 0 auto 20px; } .boas-vindas-conteudo h2 { font-size: clamp(23px, 4vw, 34px); font-weight: 900; margin: 0 0 10px; } .boas-vindas-conteudo > p { color: #DEEDFF; } .linha-carregamento { width: 230px; height: 4px; margin: 30px auto; background: rgba(255, 255, 255, .18); border-radius: 20px; overflow: hidden; } .linha-carregamento::before { content: ""; display: block; width: 45%; height: 100%; background: #FFFFFF; animation: carregamento 1.6s ease-in-out infinite; } .vinheta-marca { font-size: 29px !important; font-weight: 900; } .vinheta-marca span { color: #C9E3FF; } /* ========================================================== 14. ESTRUTURA PRINCIPAL ========================================================== */ .aplicacao { display: flex; width: 100%; min-height: 100vh; } .area-principal { display: flex; flex-direction: column; width: calc(100% - var(--sidebar-width)); min-width: 0; min-height: 100vh; margin-left: var(--sidebar-width); transition: margin-left var(--transition), width var(--transition); } /* ========================================================== 15. SIDEBAR ========================================================== */ .sidebar { position: fixed; top: 0; left: 0; bottom: 0; z-index: 500; display: flex; flex-direction: column; width: var(--sidebar-width); height: 100vh; height: 100dvh; background: var(--sidebar-bg); color: var(--sidebar-text); overflow: hidden; transition: width var(--transition), transform var(--transition); } .sidebar-topo { display: flex; align-items: center; justify-content: space-between; min-height: 92px; gap: 8px; padding: 15px 13px; border-bottom: 1px solid rgba(255, 255, 255, .09); } .sidebar-logo { display: flex; align-items: center; gap: 11px; min-width: 0; } .sidebar-logo-imagem { display: block; width: 64px; height: 64px; flex-shrink: 0; object-fit: contain; border-radius: 10px; } .sidebar-logo-texto { display: flex; flex-direction: column; min-width: 0; } .sidebar-logo-texto strong { color: #FFFFFF; font-size: 15px; font-weight: 900; white-space: nowrap; } .sidebar-logo-texto small { color: #90ABC9; font-size: 10px; white-space: nowrap; } .sidebar-topo .btn-icone { width: 32px; flex-shrink: 0; color: #AFC7E1; } .sidebar-topo .btn-icone:hover { color: #FFFFFF; background: rgba(255, 255, 255, .08); } .sidebar-navegacao { flex: 1; padding: 22px 12px; overflow-x: hidden; overflow-y: auto; } .menu-titulo { margin: 19px 13px 11px; color: #688DB8; font-size: 9px; font-weight: 900; letter-spacing: 1.4px; } .menu-titulo:first-child { margin-top: 0; } .menu-item { display: flex; align-items: center; width: 100%; min-height: 46px; gap: 14px; padding: 12px 14px; margin-bottom: 5px; background: transparent; color: var(--sidebar-text); border: 1px solid transparent; border-radius: 10px; font-size: 12px; font-weight: 600; text-align: left; transition: var(--transition); } .menu-item i { width: 19px; flex-shrink: 0; color: #95B7DC; font-size: 16px; text-align: center; } .menu-item span { white-space: nowrap; } .menu-item:hover { background: var(--sidebar-hover); color: #FFFFFF; } .menu-item.ativo { background: var(--sidebar-active); color: #FFFFFF; border-color: rgba(111, 181, 255, .15); font-weight: 800; } .menu-item.ativo i { color: #78B9FF; } /* ========================================================== 16. USUÁRIO NO MENU ========================================================== */ .sidebar-rodape { padding: 15px 12px; border-top: 1px solid rgba(255, 255, 255, .09); } .usuario-mini { display: flex; align-items: center; gap: 11px; padding: 5px; margin-bottom: 12px; } .usuario-avatar { display: flex; align-items: center; justify-content: center; width: 39px; height: 39px; flex-shrink: 0; border-radius: 11px; background: #194D8D; color: #FFFFFF; } .usuario-info { display: flex; flex-direction: column; min-width: 0; } .usuario-info strong { color: #FFFFFF; font-size: 12px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .usuario-info small { color: #90ACCA; font-size: 10px; } .btn-sair { display: flex; align-items: center; width: 100%; min-height: 43px; gap: 13px; padding: 10px 14px; color: #B9CBE1; background: transparent; border: none; border-radius: 9px; text-align: left; font-size: 12px; transition: var(--transition); } .btn-sair:hover { background: rgba(206, 64, 81, .13); color: #FFD2D8; } /* ========================================================== 17. SIDEBAR RECOLHIDA ========================================================== */ body.sidebar-recolhida .sidebar { width: var(--sidebar-mini); } body.sidebar-recolhida .area-principal { width: calc(100% - var(--sidebar-mini)); margin-left: var(--sidebar-mini); } body.sidebar-recolhida .sidebar-logo-texto, body.sidebar-recolhida .menu-item span, body.sidebar-recolhida .menu-titulo, body.sidebar-recolhida .usuario-info, body.sidebar-recolhida .btn-sair span { display: none; } body.sidebar-recolhida .sidebar-topo { flex-direction: column; padding: 11px 7px; } body.sidebar-recolhida .sidebar-logo-imagem { width: 52px; height: 52px; } body.sidebar-recolhida .sidebar-navegacao { padding: 17px 8px; } body.sidebar-recolhida .menu-item { justify-content: center; padding: 13px; } body.sidebar-recolhida .usuario-mini, body.sidebar-recolhida .btn-sair { justify-content: center; } /* ========================================================== 18. TOPBAR ========================================================== */ .topbar { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; min-height: var(--topbar-height); gap: 20px; padding: 15px 30px; background: var(--surface); border-bottom: 1px solid var(--border); } .topbar-esquerda, .topbar-direita { display: flex; align-items: center; gap: 18px; } .topbar-esquerda { min-width: 0; } .topbar-direita { flex-shrink: 0; } .topbar-esquerda h2 { margin: 0; font-size: 18px; font-weight: 900; letter-spacing: -.5px; } .topbar-esquerda p { color: var(--text-secondary); font-size: 11px; } .relogio-sistema, .data-sistema { display: flex; align-items: center; gap: 8px; color: var(--text-secondary); font-size: 12px; font-weight: 600; white-space: nowrap; } .relogio-sistema i { color: var(--has-blue-light); } .topbar-usuario { display: flex; align-items: center; gap: 9px; padding-left: 17px; border-left: 1px solid var(--border); font-size: 12px; font-weight: 800; white-space: nowrap; } .topbar-usuario i { color: var(--has-blue-light); font-size: 25px; } #btn-menu-mobile { display: none; } /* ========================================================== 19. CONTEÚDO PRINCIPAL ========================================================== */ .conteudo-principal { flex: 1; width: 100%; max-width: 1650px; margin: 0 auto; padding: 31px; } .pagina { display: none; animation: subir .3s ease; } .pagina.ativa:not([hidden]) { display: block; } .pagina-cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 23px; margin-bottom: 27px; } .pagina-sobretitulo { margin-bottom: 6px; color: var(--has-blue-light) !important; font-size: 10px !important; font-weight: 900; letter-spacing: 1.5px; } .pagina-cabecalho h1 { margin: 0; font-size: clamp(22px, 2.5vw, 28px); font-weight: 900; letter-spacing: -.8px; } .pagina-cabecalho p { margin-top: 6px; color: var(--text-secondary); font-size: 12px; } .pagina-acoes { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; } .pagina-acoes button { white-space: nowrap; } .secao-titulo { margin-bottom: 19px; } .secao-titulo h3 { margin: 0; font-size: 15px; font-weight: 900; } .secao-titulo p { margin-top: 5px; color: var(--text-secondary); font-size: 12px; } .secao-titulo.horizontal { display: flex; align-items: center; justify-content: space-between; gap: 16px; } /* ========================================================== 20. DASHBOARD - QUATRO CARDS ========================================================== */ .dashboard-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 19px; } .card-indicador { position: relative; min-width: 0; padding: 25px; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: var(--transition); } .card-indicador::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--has-blue); opacity: 0; transition: var(--transition); } .card-indicador:hover { transform: translateY(-3px); border-color: var(--has-blue-border); box-shadow: var(--shadow-md); } .card-indicador:hover::before { opacity: 1; } .card-icone { display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; margin-bottom: 20px; background: var(--has-blue-soft); color: var(--has-blue-light); border-radius: 14px; font-size: 20px; } .card-indicador > p { color: var(--text-secondary); font-size: 12px; font-weight: 700; } .card-indicador h2 { margin: 5px 0 14px; font-size: 35px; font-weight: 900; line-height: 1.2; letter-spacing: -1.3px; font-variant-numeric: tabular-nums; } .card-legenda { color: var(--text-muted); font-size: 11px; font-weight: 600; } /* ========================================================== 21. CORES DOS QUATRO CARDS 1. CLIENTES 2. ORDENS DE SERVIÇO 3. ENTREGAS 4. ESTOQUE ========================================================== */ #card-dashboard-clientes .card-icone { background: #E8F2FF; color: #004AAB; } #card-dashboard-ordens .card-icone { background: #E8F7F0; color: #118764; } #card-dashboard-entregas .card-icone { background: #FFF4DF; color: #BE7B15; } #card-dashboard-estoque .card-icone { background: #EDF0FF; color: #5A55BC; } #card-dashboard-clientes::before { background: #004AAB; } #card-dashboard-ordens::before { background: #118764; } #card-dashboard-entregas::before { background: #BE7B15; } #card-dashboard-estoque::before { background: #5A55BC; } /* ========================================================== 22. PAINÉIS ========================================================== */ .painel { padding: 25px; margin-bottom: 23px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .painel-cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 23px; } .painel-cabecalho h2 { margin: 0; font-size: 16px; font-weight: 900; letter-spacing: -.3px; } .painel-cabecalho h2 i { margin-right: 7px; color: var(--has-blue-light); } .painel-cabecalho p { margin-top: 5px; color: var(--text-secondary); font-size: 12px; } /* ========================================================== 23. ORDENS - DUAS OPÇÕES INICIAIS ========================================================== */ .ordens-opcoes-principais { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 24px; } .ordem-opcao-card { display: flex; align-items: center; width: 100%; min-height: 145px; gap: 19px; padding: 26px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); text-align: left; position: relative; overflow: hidden; transition: background var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition); } .ordem-opcao-card::before { content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 4px; background: var(--has-blue); opacity: 0; transition: var(--transition); } .ordem-opcao-card:hover { transform: translateY(-3px); background: var(--surface); border-color: var(--has-blue-border); box-shadow: var(--shadow-md); } .ordem-opcao-card:hover::before { opacity: 1; } .ordem-opcao-icone { display: flex; align-items: center; justify-content: center; width: 65px; height: 65px; flex-shrink: 0; background: var(--has-blue-soft); color: var(--has-blue-light); border-radius: 16px; font-size: 26px; } .ordem-opcao-conteudo { display: flex; flex: 1; flex-direction: column; gap: 6px; min-width: 0; } .ordem-opcao-conteudo strong { color: var(--text); font-size: 17px; font-weight: 900; } .ordem-opcao-conteudo small { color: var(--text-secondary); font-size: 12px; line-height: 1.7; } .ordem-opcao-card > .fa-arrow-right { flex-shrink: 0; color: var(--has-blue-light); font-size: 15px; transition: transform var(--transition); } .ordem-opcao-card:hover > .fa-arrow-right { transform: translateX(4px); } /* ========================================================== 24. ORDENS - PAINEL DE CONSULTA ========================================================== */ .painel-consulta-ordem { border-color: var(--has-blue-border); animation: subir .3s ease; } .painel-consulta-ordem .painel-cabecalho { padding-bottom: 17px; border-bottom: 1px solid var(--border); } .painel-consulta-ordem .form-grid { margin-top: 18px; } .painel-consulta-ordem .campo label { font-weight: 800; } .painel-consulta-ordem .acoes-formulario { margin-top: 16px; } .painel-resultado-ordem { animation: subir .3s ease; } .painel-resultado-ordem .painel-cabecalho { border-bottom: 1px solid var(--border); padding-bottom: 19px; } /* ========================================================== 25. DADOS DA OC CONSULTADA ========================================================== */ .resumo-ordem { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding: 20px; margin-bottom: 24px; background: var(--surface-secondary); border: 1px solid var(--border); border-radius: 12px; } .resumo-ordem > div { min-width: 0; } .resumo-ordem small { display: block; margin-bottom: 6px; color: var(--text-muted); font-size: 10px; font-weight: 800; } .resumo-ordem strong { display: block; color: var(--text); font-size: 12px; font-weight: 800; overflow-wrap: anywhere; } /* ========================================================== 26. PESQUISA E FILTROS ========================================================== */ .filtros-barra { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 15px; margin-bottom: 20px; } .pesquisa { position: relative; flex: 1; min-width: 210px; max-width: 490px; } .pesquisa > i { position: absolute; top: 50%; left: 15px; transform: translateY(-50%); color: var(--text-muted); } .pesquisa input { padding-left: 42px; } .filtros-barra select { width: auto; min-width: 170px; } /* ========================================================== 27. TABELAS GERAIS ========================================================== */ .tabela-container { width: 100%; overflow-x: auto; border-radius: 9px; } table { width: 100%; border-collapse: collapse; text-align: left; font-size: 12px; } table thead { background: var(--surface-secondary); } table th { padding: 14px 12px; border-bottom: 1px solid var(--border); color: var(--text-secondary); font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .35px; white-space: nowrap; } table td { padding: 14px 12px; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: middle; } table tbody tr { transition: background var(--transition); } table tbody tr:hover { background: var(--surface-secondary); } table tbody tr:last-child td { border-bottom: none; } table tfoot td { padding: 16px 12px; background: var(--surface-secondary); border-top: 1px solid var(--border); font-weight: 800; } .tabela-vazia { padding: 35px 18px; text-align: center; color: var(--text-muted); } .acoes-tabela { display: flex; align-items: center; gap: 7px; } .btn-acao { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; background: var(--surface); color: var(--text-secondary); border: 1px solid var(--border); border-radius: 8px; transition: var(--transition); } .btn-acao:hover { color: var(--has-blue-light); background: var(--has-blue-soft); border-color: var(--has-blue-border); } .link-card { background: transparent; color: var(--has-blue-light); border: none; font-weight: 800; text-align: left; } .link-card:hover { text-decoration: underline; } /* ========================================================== 28. ESTOQUE ========================================================== */ #tabela-estoque { min-width: 780px; } #tabela-estoque th:first-child, #tabela-estoque td:first-child { width: 75px; text-align: center; } #tabela-estoque th:nth-child(2) { min-width: 220px; } #tabela-estoque th:nth-child(3), #tabela-estoque td:nth-child(3) { text-align: center; } #tabela-estoque th:nth-child(4), #tabela-estoque td:nth-child(4), #tabela-estoque th:nth-child(5), #tabela-estoque td:nth-child(5), #tabela-estoque th:nth-child(6), #tabela-estoque td:nth-child(6) { text-align: right; } #tabela-estoque td:nth-child(5), #tabela-estoque td:nth-child(6) { white-space: nowrap; font-variant-numeric: tabular-nums; } #tabela-estoque td:nth-child(6) { font-weight: 800; } #tabela-estoque th:last-child, #tabela-estoque td:last-child { text-align: center; } #valor-total-estoque { color: var(--has-blue-light); font-size: 15px; font-weight: 900; white-space: nowrap; } .codigo-automatico { display: flex; align-items: center; gap: 14px; min-height: 54px; padding: 13px 16px; background: var(--surface-secondary); border: 1px solid var(--border); border-radius: 10px; } .codigo-automatico > i { color: var(--has-blue-light); font-size: 18px; } .codigo-automatico strong { font-size: 19px; font-weight: 900; } .codigo-automatico small { margin-left: auto; color: var(--text-muted); text-align: right; font-size: 10px; } /* ========================================================== 29. TABELA DE ITENS DA OC ========================================================== */ #tabela-itens-ordem { min-width: 850px; } #tabela-itens-ordem th, #tabela-itens-ordem td { padding: 15px 12px; } #tabela-itens-ordem th:nth-child(n+4):nth-child(-n+6), #tabela-itens-ordem td:nth-child(n+4):nth-child(-n+6) { text-align: right; } #tabela-itens-ordem td:last-child { min-width: 110px; } #ordem-valor-total { color: var(--has-blue-light); font-size: 15px; font-weight: 900; } .coluna-situacao { min-width: 95px; } /* ========================================================== 30. TABELA DE ENTREGAS ========================================================== */ #tabela-entregas { min-width: 750px; } #tabela-entregas td:nth-child(4) { max-width: 290px; overflow-wrap: anywhere; } #tabela-entregas td:last-child { min-width: 110px; } #tabela-entregas .entrega-concluida td { background: var(--surface-secondary); } /* CLASSE PARA EXIBIR ENTREGAS FINALIZADAS */ .entrega-concluida .status, .status-concluida-entrega { background: var(--success-bg); color: var(--success); } /* ========================================================== 31. STATUS ========================================================== */ .status { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 6px 11px; border-radius: 8px; font-size: 10px; font-weight: 800; white-space: nowrap; } .status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .status-aberta, .status-a-entregar { background: var(--warning-bg); color: var(--warning); } .status-separacao, .status-em-rota { background: var(--has-blue-soft); color: var(--has-blue-light); } .status-parcial { background: var(--warning-bg); color: var(--warning); } .status-concluida, .status-entregue { background: var(--success-bg); color: var(--success); } .status-cancelada { background: var(--danger-bg); color: var(--danger); } /* ========================================================== 32. AVISOS ========================================================== */ .aviso-discreto { display: flex; align-items: flex-start; gap: 11px; padding: 14px 16px; margin-top: 19px; background: var(--has-blue-soft); color: var(--text-secondary); border: 1px solid var(--has-blue-border); border-radius: 10px; font-size: 11px; } .aviso-discreto i { color: var(--has-blue-light); margin-top: 2px; font-size: 14px; } /* ========================================================== 33. MODAIS ========================================================== */ .modal { position: fixed; inset: 0; width: calc(100% - 32px); max-width: 620px; max-height: 90vh; max-height: 90dvh; margin: auto; padding: 0; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); overflow-x: hidden; overflow-y: auto; } .modal:not([open]) { display: none; } .modal[open] { animation: ampliar .22s ease; } .modal::backdrop { background: rgba(3, 15, 35, .76); backdrop-filter: blur(5px); } .modal-grande { max-width: 1120px; } .modal-pequeno { max-width: 435px; } .modal-documento { max-width: 1160px; } .modal-cabecalho { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 23px 27px; border-bottom: 1px solid var(--border); } .modal-sobretitulo { margin-bottom: 6px; color: var(--has-blue-light) !important; font-size: 9px !important; font-weight: 900; letter-spacing: 1.5px; } .modal-cabecalho h2 { margin: 0; font-size: 19px; font-weight: 900; letter-spacing: -.4px; } .modal-cabecalho h2 i { color: var(--has-blue-light); margin-right: 7px; } .modal-cabecalho p { color: var(--text-secondary); font-size: 11px; margin-top: 5px; } .modal-corpo { padding: 27px; } .modal-rodape { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; padding: 19px 27px; background: var(--surface-secondary); border-top: 1px solid var(--border); } .modal .modal-corpo > .modal-rodape { margin: 24px -27px -27px; } /* ========================================================== 34. TABELA EDITÁVEL DE OC ========================================================== */ .tabela-formulario { min-width: 875px; } .tabela-formulario th { padding: 12px 9px; } .tabela-formulario td { padding: 9px 6px; } .tabela-formulario input, .tabela-formulario select { width: 100%; min-height: 40px; min-width: 65px; padding: 8px; background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); border-radius: 8px; outline: none; font-size: 12px; } .tabela-formulario input:focus, .tabela-formulario select:focus { border-color: var(--has-blue-light); } .tabela-formulario .item-numero { width: 65px; min-width: 55px; } .tabela-formulario .item-descricao { min-width: 220px; } .tabela-formulario .item-tipo { min-width: 75px; } .tabela-formulario .item-quantidade { min-width: 90px; } .tabela-formulario .item-valor-unitario { min-width: 115px; text-align: right; } .tabela-formulario .item-valor-total { display: inline-block; min-width: 108px; color: var(--text); font-size: 11px; font-weight: 800; text-align: right; white-space: nowrap; } .btn-remover-item { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; background: var(--surface); color: var(--danger); border: 1px solid var(--border); border-radius: 8px; } .btn-remover-item:hover { background: var(--danger-bg); } /* ========================================================== 35. IMPORTAÇÃO DE DOCUMENTOS ========================================================== */ .area-upload { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 42px 24px; background: var(--surface-secondary); border: 2px dashed var(--border-strong); border-radius: 15px; text-align: center; transition: var(--transition); } .area-upload:hover { background: var(--has-blue-soft); border-color: var(--has-blue-light); } .upload-icone { display: flex; align-items: center; justify-content: center; width: 70px; height: 70px; margin-bottom: 18px; background: var(--has-blue-soft); color: var(--has-blue-light); border-radius: 19px; font-size: 28px; } .area-upload h3 { margin: 0 0 7px; font-size: 16px; font-weight: 900; } .area-upload p { color: var(--text-secondary); font-size: 12px; margin-bottom: 20px; } .area-upload label.btn-primario { cursor: pointer; } .area-upload small { margin-top: 15px; color: var(--text-muted); font-size: 11px; overflow-wrap: anywhere; } .importacao-processando { margin-top: 20px; padding: 30px; background: var(--has-blue-soft); color: var(--has-blue-light); border-radius: 12px; text-align: center; } .importacao-processando i { display: block; font-size: 29px; margin-bottom: 13px; } .preview-documento { margin-top: 27px; } .preview-documento h3 { margin: 0 0 13px; font-size: 14px; font-weight: 900; } .visualizador-documento { min-height: 200px; max-height: 470px; padding: 15px; overflow: auto; background: var(--surface-secondary); border: 1px solid var(--border); border-radius: 11px; } .visualizador-documento iframe { display: block; width: 100%; height: 430px; border: none; background: #FFFFFF; } .visualizador-documento img { display: block; max-height: 430px; width: auto; margin: auto; } #form-revisao-importacao { margin-top: 29px; } .alertas-importacao:not(:empty) { padding: 14px; margin-bottom: 20px; background: var(--warning-bg); color: var(--warning); border-radius: 9px; font-size: 12px; } /* ========================================================== 36. IMPRESSÃO PERSONALIZADA ========================================================== */ .modal-corpo > h3 { margin: 0 0 15px; font-size: 14px; font-weight: 900; } .opcoes-impressao { display: flex; flex-direction: column; gap: 10px; } .opcao-radio { display: flex; align-items: center; gap: 14px; padding: 15px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; transition: var(--transition); } .opcao-radio:hover { border-color: var(--has-blue-light); background: var(--surface-secondary); } .opcao-radio:has(input:checked) { background: var(--has-blue-soft); border-color: var(--has-blue-light); } .opcao-radio input { width: 16px; height: 16px; flex-shrink: 0; } .opcao-radio span { display: flex; flex-direction: column; gap: 4px; } .opcao-radio strong { font-size: 12px; font-weight: 800; } .opcao-radio small { color: var(--text-secondary); font-size: 11px; } .impressao-personalizada { padding: 18px; margin-top: 20px; background: var(--surface-secondary); border-radius: 11px; } .impressao-personalizada h3 { margin: 0 0 14px; font-size: 13px; } .lista-checkbox { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .lista-checkbox label { display: flex; align-items: center; gap: 9px; font-size: 12px; cursor: pointer; } .lista-checkbox input { width: 16px; height: 16px; } /* ========================================================== 37. LOGOTIPO NAS CONFIGURAÇÕES ========================================================== */ .config-logo-container { display: flex; align-items: center; flex-wrap: wrap; gap: 29px; } .config-logo-preview { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px; width: 245px; min-height: 205px; padding: 14px; background: var(--surface-secondary); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; } .config-logo-preview img { display: block; width: 100%; max-height: 175px; object-fit: contain; border-radius: 10px; } .config-logo-acoes { display: flex; flex-direction: column; align-items: flex-start; flex: 1; min-width: 220px; gap: 13px; } .config-logo-acoes > label { font-size: 13px; font-weight: 800; } .config-logo-acoes input[type="file"] { width: 100%; max-width: 450px; padding: 12px; background: var(--surface-secondary); border: 1px solid var(--border); border-radius: 10px; font-size: 12px; } .config-logo-acoes input[type="file"]::file-selector-button { padding: 9px 13px; margin-right: 11px; background: var(--has-blue); color: #FFFFFF; border: none; border-radius: 8px; cursor: pointer; } .config-logo-acoes small { color: var(--text-muted); font-size: 11px; } .config-logo-acoes p { max-width: 470px; color: var(--text-secondary); font-size: 12px; } /* ========================================================== 38. BACKUP ========================================================== */ .backup-container { display: flex; flex-direction: column; gap: 23px; } .backup-informacoes { display: flex; align-items: center; gap: 18px; padding: 19px; background: var(--surface-secondary); border: 1px solid var(--border); border-radius: 12px; } .backup-informacoes > i { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; flex-shrink: 0; background: var(--has-blue-soft); color: var(--has-blue-light); border-radius: 13px; font-size: 22px; } .backup-informacoes h3 { margin: 0 0 5px; font-size: 14px; font-weight: 900; } .backup-informacoes p { color: var(--text-secondary); font-size: 12px; } .backup-container .pagina-acoes { justify-content: flex-start; } /* ========================================================== 39. BOTÕES FLUTUANTES ========================================================== */ .atalhos-flutuantes { position: fixed; right: 25px; bottom: 25px; z-index: 300; display: flex; flex-direction: column; gap: 11px; } .botao-flutuante { display: flex; align-items: center; justify-content: center; width: 55px; height: 55px; background: var(--has-blue); color: #FFFFFF; border: 1px solid rgba(255, 255, 255, .15); border-radius: 15px; box-shadow: 0 9px 27px rgba(0, 50, 115, .25); font-size: 21px; transition: var(--transition); } .botao-flutuante:hover { background: var(--has-blue-hover); transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0, 74, 171, .30); } #btn-calculadora { background: #073B7D; } #btn-calendario { background: #004AAB; } /* ========================================================== 40. CALCULADORA ========================================================== */ .modal-calculadora { max-width: 365px; } .calculadora-corpo { padding: 22px; } .calculadora-visor { display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; min-height: 120px; padding: 20px; margin-bottom: 19px; background: linear-gradient( 135deg, #00357D, #004AAB ); color: #FFFFFF; border-radius: 14px; overflow: hidden; } .calculadora-operacao { min-height: 20px; margin-bottom: 8px; color: #C1DCFF; font-size: 13px; text-align: right; } #calculadora-resultado { display: block; max-width: 100%; color: #FFFFFF; font-size: 32px; font-weight: 900; text-align: right; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; } .calculadora-teclas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; } .tecla { display: flex; align-items: center; justify-content: center; min-height: 57px; background: var(--surface-secondary); color: var(--text); border: 1px solid var(--border); border-radius: 11px; font-size: 17px; font-weight: 800; transition: var(--transition); } .tecla:hover { background: var(--surface-hover); } .tecla-funcao, .tecla-operacao { background: var(--has-blue-soft); color: var(--has-blue-light); } .tecla-operacao { font-size: 20px; } .tecla-igual { background: var(--has-blue); color: #FFFFFF; font-size: 23px; } .tecla-igual:hover { background: var(--has-blue-hover); } /* ========================================================== 41. CALENDÁRIO ========================================================== */ .modal-calendario { max-width: 420px; } .calendario-corpo { padding: 25px; } .calendario-navegacao { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 23px; } .calendario-navegacao h3 { margin: 0; font-size: 15px; font-weight: 900; text-align: center; text-transform: capitalize; } .calendario-semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; margin-bottom: 10px; } .calendario-semana span { padding: 9px 0; color: var(--text-secondary); font-size: 10px; font-weight: 900; text-align: center; } .calendario-grade { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; } .calendario-dia { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; min-width: 0; background: transparent; color: var(--text); border: 1px solid transparent; border-radius: 10px; font-size: 12px; font-weight: 700; transition: var(--transition); } .calendario-dia:hover { background: var(--has-blue-soft); color: var(--has-blue-light); } .calendario-dia.hoje { border-color: var(--has-blue-light); color: var(--has-blue-light); } .calendario-dia.selecionado { background: var(--has-blue); color: #FFFFFF; border-color: var(--has-blue); } .calendario-rodape { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--border); } #calendario-data-selecionada { color: var(--text-secondary); font-size: 11px; } /* ========================================================== 42. MODAL DE CONFIRMAÇÃO ========================================================== */ .confirmacao-icone { display: flex; align-items: center; justify-content: center; width: 65px; height: 65px; margin: 0 auto 20px; background: var(--warning-bg); color: var(--warning); border-radius: 18px; font-size: 27px; } #modal-confirmacao .modal-corpo { text-align: center; } #confirmacao-mensagem { color: var(--text-secondary); font-size: 13px; line-height: 1.8; } #modal-confirmacao .modal-rodape { justify-content: center; } /* ========================================================== 43. DOCUMENTOS CORPORATIVOS IMPORTANTE: A PRÉ-VISUALIZAÇÃO E A IMPRESSÃO USAM AS MESMAS REGRAS INTERNAS. PAPEL A4 = 210 MM X 297 MM. O CONTEÚDO TEM MARGENS INTERNAS PRÓPRIAS. ========================================================== */ .preview-conteudo { padding: 28px; background: #E8EDF4; border-radius: 12px; overflow-x: auto; color-scheme: light; } .documento-corporativo { position: relative; isolation: isolate; width: 210mm; max-width: none; min-height: 297mm; margin: 0 auto; padding: 12mm 13mm; background: #FFFFFF; color: #1D2C42; border: none; box-shadow: 0 10px 30px rgba(0, 0, 0, .12); font-family: Arial, Helvetica, sans-serif; font-size: 10px; line-height: 1.5; overflow-wrap: anywhere; } .documento-corporativo > *:not(.documento-marca-dagua) { position: relative; z-index: 1; } /* ========================================================== 44. MARCA-D'ÁGUA ========================================================== */ .documento-marca-dagua { position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 66%; z-index: 0; opacity: .065; pointer-events: none; } .documento-marca-dagua img { display: block; width: 100%; max-width: 120mm; max-height: 120mm; object-fit: contain; filter: grayscale(1); } /* ========================================================== 45. CABEÇALHO DOS DOCUMENTOS ========================================================== */ .documento-cabecalho { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 18px; padding-bottom: 17px; border-bottom: 3px solid #004AAB; } .documento-marca { display: flex; align-items: center; gap: 13px; min-width: 0; } .documento-logo { display: flex; align-items: center; justify-content: center; width: 70px; height: 70px; flex-shrink: 0; background: #004AAB; border-radius: 8px; overflow: hidden; } .documento-logo-imagem { display: block; width: 100%; height: 100%; object-fit: contain; } .documento-marca h1 { margin: 0; color: #004AAB; font-size: 21px; font-weight: 900; letter-spacing: -.5px; } .documento-marca p { margin-top: 3px; color: #607187; font-size: 9px; } .documento-identificacao { max-width: 225px; text-align: right; } .documento-identificacao strong { display: block; color: #003780; font-size: 11px; font-weight: 900; } .documento-identificacao p { margin-top: 6px; color: #5D6C80; font-size: 10px; } /* ========================================================== 46. DADOS DOS DOCUMENTOS ========================================================== */ .documento-dados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 22px; margin-bottom: 22px; } .doc-campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .doc-campo strong { color: #627187; font-size: 9px; font-weight: 800; } .doc-campo span { color: #1D2C42; font-size: 11px; font-weight: 700; overflow-wrap: anywhere; white-space: pre-wrap; } .doc-campo-largo { grid-column: 1 / -1; } .documento-meta { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 12px 14px; margin-bottom: 20px; background: #EDF4FC; border: 1px solid #D8E5F4; border-radius: 7px; } .documento-meta span { color: #60738A; font-size: 9px; } .documento-meta strong { color: #174475; } /* ========================================================== 47. TABELAS DE IMPRESSÃO ========================================================== */ .documento-tabela-container { width: 100%; overflow: visible; } .documento-tabela { width: 100%; border-collapse: collapse; font-family: Arial, Helvetica, sans-serif; font-size: 9px; color: #1D2C42; } .documento-tabela thead { background: #EAF2FC; } .documento-tabela th { padding: 9px 7px; background: #EAF2FC; color: #003780; border: 1px solid #B6CBE2; font-size: 8px; font-weight: 900; text-align: left; text-transform: uppercase; white-space: normal; } .documento-tabela td { padding: 9px 7px; border: 1px solid #B6CBE2; color: #24364C; font-size: 9px; vertical-align: top; overflow-wrap: anywhere; } .documento-tabela tbody tr:hover { background: transparent; } .documento-tabela tfoot td { background: #EAF2FC; color: #003780; border: 1px solid #B6CBE2; font-weight: 900; } .documento-tabela .coluna-situacao { min-width: 72px; height: 38px; } /* ========================================================== 48. DOCUMENTO DE ESTOQUE ========================================================== */ .documento-estoque .documento-tabela th:nth-child(n+4), .documento-estoque .documento-tabela td:nth-child(n+4) { text-align: right; } /* ========================================================== 49. COMPROVANTE DE ENTREGA - TÍTULO ========================================================== */ .documento-titulo-destaque { padding: 13px 16px; margin-bottom: 21px; background: #EDF4FC; border-left: 4px solid #004AAB; } .documento-titulo-destaque h2 { margin: 0; color: #003780; font-size: 12px; font-weight: 900; } .documento-titulo-destaque p { margin-top: 5px; color: #60748B; font-size: 9px; } /* ========================================================== 50. MATERIAIS DO COMPROVANTE ========================================================== */ .documento-listagem-entrega { margin-top: 20px; margin-bottom: 21px; } .documento-listagem-entrega h3 { margin: 0 0 10px; color: #003780; font-size: 10px; font-weight: 900; } /* ========================================================== 51. DECLARAÇÃO DE RESPONSABILIDADES ========================================================== */ .documento-declaracao { padding: 13px 15px; margin-top: 20px; background: #EDF4FC; border: 1px solid #CFDCEB; border-radius: 7px; } .documento-declaracao h3 { margin: 0 0 7px; color: #003780; font-size: 10px; font-weight: 900; } .documento-declaracao p { color: #364B63; font-size: 9px; line-height: 1.7; } /* ========================================================== 52. ASSINATURA GERAL ========================================================== */ .documento-assinaturas { display: flex; justify-content: space-between; gap: 25px; margin-top: 52px; } .assinatura-campo { flex: 1; text-align: center; } .assinatura-linha { height: 25px; margin-bottom: 9px; border-bottom: 1px solid #314660; } .assinatura-campo span { color: #52667D; font-size: 9px; } /* ========================================================== 53. TRÊS ASSINATURAS DA ENTREGA ========================================================== */ .assinaturas-entrega { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 16px; margin-top: 47px; } .assinatura-bloco { min-width: 0; text-align: center; } .assinatura-bloco .assinatura-linha { height: 34px; margin-bottom: 11px; } .assinatura-bloco strong { display: block; min-height: 29px; margin-bottom: 8px; color: #003780; font-size: 8px; font-weight: 900; } .assinatura-bloco p { color: #4A5F77; font-size: 8px; text-align: left; line-height: 2; white-space: nowrap; } /* ========================================================== 54. OBSERVAÇÕES NO COMPROVANTE ========================================================== */ .documento-observacoes { margin-top: 25px; padding-top: 14px; border-top: 1px solid #D4DFEC; } .documento-observacoes > strong { display: block; margin-bottom: 11px; color: #003780; font-size: 10px; font-weight: 900; } .documento-observacoes > p { margin-bottom: 9px; color: #465B73; font-size: 9px; white-space: pre-wrap; } .linhas-observacoes { display: flex; flex-direction: column; gap: 14px; } .linhas-observacoes span { display: block; height: 9px; border-bottom: 1px solid #CDD9E6; } /* ========================================================== 55. RODAPÉ DOS DOCUMENTOS ========================================================== */ .documento-rodape { margin-top: 25px; padding-top: 12px; border-top: 1px solid #D4DFEC; color: #72849A; text-align: center; font-size: 8px; } .documento-rodape p + p { margin-top: 4px; } /* ========================================================== 56. NOTIFICAÇÕES ========================================================== */ .container-notificacoes { position: fixed; top: 20px; right: 20px; z-index: 3000; display: flex; flex-direction: column; width: min(370px, calc(100% - 32px)); gap: 10px; pointer-events: none; } .notificacao { padding: 15px 17px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-left: 4px solid var(--has-blue); border-radius: 10px; box-shadow: var(--shadow-lg); font-size: 12px; pointer-events: auto; animation: subir .25s ease; } .notificacao.sucesso { border-left-color: var(--success); } .notificacao.erro { border-left-color: var(--danger); } .notificacao.aviso { border-left-color: var(--warning); } /* ========================================================== 57. RODAPÉ DO SISTEMA ========================================================== */ .rodape-sistema { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 18px 30px; background: var(--surface); border-top: 1px solid var(--border); color: var(--text-muted); font-size: 10px; } /* ========================================================== 58. MENU MOBILE ========================================================== */ .overlay-menu { position: fixed; inset: 0; z-index: 450; background: rgba(3, 15, 35, .68); backdrop-filter: blur(3px); } /* ========================================================== 59. RESPONSIVIDADE - NOTEBOOK ========================================================== */ @media (max-width: 1350px) { .dashboard-cards { gap: 14px; } .card-indicador { padding: 21px; } .card-indicador h2 { font-size: 32px; } } @media (max-width: 1150px) { :root { --sidebar-width: 245px; } .dashboard-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .conteudo-principal { padding: 25px; } .topbar { padding: 15px 24px; } .resumo-ordem { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ========================================================== 60. RESPONSIVIDADE - TABLET ========================================================== */ @media (max-width: 1024px) { .topbar-direita .data-sistema { display: none; } .login-card { padding: 48px 34px; } .login-visual { padding: 34px; } .login-visual-conteudo h1 { font-size: 32px; } .ordem-opcao-card { padding: 20px; min-height: 133px; } .ordem-opcao-icone { width: 54px; height: 54px; font-size: 23px; } .ordem-opcao-conteudo strong { font-size: 15px; } } /* ========================================================== 61. RESPONSIVIDADE - CELULAR ========================================================== */ @media (max-width: 768px) { :root { --topbar-height: 68px; } /* LOGIN */ .tela-login { padding: 18px; } .login-layout { display: block; max-width: 455px; min-height: 0; } .login-visual { display: none; } .login-card { padding: 32px 26px; } .login-marca-mobile { display: block; } .logo-login-mobile { display: block; width: 115px; height: 115px; object-fit: contain; margin: 0 auto 17px; border-radius: 15px; } .login-cabecalho h2 { font-size: 25px; } /* SIDEBAR */ .sidebar, body.sidebar-recolhida .sidebar { width: 270px; transform: translateX(-100%); } .sidebar.aberta, body.sidebar-recolhida .sidebar.aberta { transform: translateX(0); } body.sidebar-recolhida .sidebar-logo-texto, body.sidebar-recolhida .menu-item span, body.sidebar-recolhida .menu-titulo, body.sidebar-recolhida .usuario-info, body.sidebar-recolhida .btn-sair span { display: flex; } body.sidebar-recolhida .sidebar-topo { flex-direction: row; padding: 15px 13px; } body.sidebar-recolhida .sidebar-logo-imagem { width: 64px; height: 64px; } body.sidebar-recolhida .sidebar-navegacao { padding: 22px 12px; } body.sidebar-recolhida .menu-item { justify-content: flex-start; padding: 12px 14px; } .area-principal, body.sidebar-recolhida .area-principal { width: 100%; margin-left: 0; } #btn-menu-mobile { display: flex; } /* TOPBAR */ .topbar { padding: 12px 16px; gap: 10px; } .topbar-esquerda { gap: 8px; } .topbar-esquerda h2 { font-size: 16px; } .topbar-esquerda p { display: none; } .topbar-direita { gap: 9px; } .topbar-usuario { padding-left: 8px; } .topbar-usuario span, .topbar-direita .relogio-sistema, .topbar-direita .data-sistema { display: none; } /* CONTEÚDO */ .conteudo-principal { padding: 20px 15px; } .pagina-cabecalho { flex-direction: column; align-items: flex-start; gap: 16px; } .pagina-cabecalho h1 { font-size: 24px; } .pagina-acoes { width: 100%; } /* DASHBOARD */ .dashboard-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; } .card-indicador { padding: 18px; } .card-indicador h2 { font-size: 29px; } .card-icone { width: 46px; height: 46px; font-size: 19px; } /* ORDENS */ .ordens-opcoes-principais { grid-template-columns: 1fr; gap: 14px; } .ordem-opcao-card { min-height: 115px; padding: 20px; } /* PAINÉIS */ .painel { padding: 18px; border-radius: 13px; } .painel-cabecalho { flex-direction: column; align-items: flex-start; gap: 15px; } .filtros-barra { flex-direction: column; align-items: stretch; } .pesquisa { width: 100%; max-width: none; min-width: 0; } .filtros-barra select { width: 100%; } .duas-colunas { grid-template-columns: 1fr; } .resumo-ordem { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* MODAIS */ .modal { width: calc(100% - 18px); max-height: 94vh; max-height: 94dvh; border-radius: 15px; } .modal-cabecalho { padding: 20px; } .modal-corpo { padding: 20px; } .modal-rodape { padding: 17px 20px; } .modal .modal-corpo > .modal-rodape { margin: 23px -20px -20px; } /* PRÉ-VISUALIZAÇÃO */ .preview-conteudo { padding: 10px; } /* O DOCUMENTO CONTINUA EM A4 REAL. NO CELULAR, É POSSÍVEL ROLAR NA HORIZONTAL PARA CONFERIR A PRÉ-VISUALIZAÇÃO. */ .documento-corporativo { max-width: none; } /* FERRAMENTAS */ .atalhos-flutuantes { right: 15px; bottom: 15px; gap: 10px; } .botao-flutuante { width: 49px; height: 49px; font-size: 19px; } .rodape-sistema { padding: 15px; } } /* ========================================================== 62. CELULARES PEQUENOS ========================================================== */ @media (max-width: 480px) { .login-card { padding: 27px 20px; } .login-cabecalho h2 { font-size: 23px; } .pagina-cabecalho h1 { font-size: 22px; } .dashboard-cards { grid-template-columns: 1fr; } .card-indicador { padding: 21px; } .card-indicador h2 { font-size: 32px; } .ordem-opcao-card { gap: 14px; } .ordem-opcao-icone { width: 52px; height: 52px; } .resumo-ordem { grid-template-columns: 1fr; } .lista-checkbox { grid-template-columns: 1fr; } .modal-rodape { flex-direction: column-reverse; align-items: stretch; } .modal-rodape button { width: 100%; } .codigo-automatico { flex-direction: column; align-items: flex-start; } .codigo-automatico small { margin-left: 0; text-align: left; } .calculadora-corpo { padding: 15px; } .calculadora-teclas { gap: 7px; } .tecla { min-height: 51px; } .calendario-corpo { padding: 17px; } } /* ========================================================== 63. ÁREA DE IMPRESSÃO FORA DO MODO DE IMPRESSÃO, A ÁREA FICA TOTALMENTE OCULTA. ========================================================== */ #area-impressao { display: none; } /* ========================================================== 64. CONFIGURAÇÃO DA PÁGINA A4 MARGEM ZERO NO PAPEL: O DOCUMENTO JÁ POSSUI MARGENS INTERNAS DE 12 MM EM CIMA/BAIXO E 13 MM NAS LATERAIS. ISSO EVITA SOMAR MARGENS DUAS VEZES E CRIAR UMA SEGUNDA FOLHA VAZIA. ========================================================== */ @page { size: A4 portrait; margin: 0; } /* ========================================================== 65. IMPRESSÃO PROFISSIONAL OBJETIVO: - MESMO LAYOUT DA PRÉVIA - LOGO E MARCA-D'ÁGUA - SEM INTERFACE DO SISTEMA - UMA PÁGINA QUANDO O CONTEÚDO COUBER - MÚLTIPLAS PÁGINAS QUANDO NECESSÁRIO ========================================================== */ @media print { html, body { width: 210mm !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; background: #FFFFFF !important; color: #1D2C42 !important; overflow: visible !important; } /* EXIBIR APENAS A ÁREA DE IMPRESSÃO. */ body.print-mode > :not(#area-impressao) { display: none !important; } body.print-mode #area-impressao { display: block !important; position: static !important; width: 210mm !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; background: #FFFFFF !important; overflow: visible !important; } /* REAPROVEITA A MESMA FORMATAÇÃO DO DOCUMENTO VISUALIZADO. APENAS A ALTURA MÍNIMA DO PAPEL É RETIRADA, PARA NÃO GERAR UMA PÁGINA EXTRA. */ body.print-mode #area-impressao .documento-corporativo { position: relative !important; display: block !important; width: 210mm !important; max-width: 210mm !important; min-height: 0 !important; height: auto !important; margin: 0 !important; padding: 12mm 13mm !important; background: #FFFFFF !important; color: #1D2C42 !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 10px !important; line-height: 1.5 !important; } /* PRESERVAR AS CORES CORPORATIVAS. */ .documento-corporativo, .documento-corporativo * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } /* NÃO MODIFICAR O GRID, AS FONTES, OS ESPAÇAMENTOS OU O TAMANHO DA LOGO ENTRE A VISUALIZAÇÃO E A IMPRESSÃO. */ .documento-cabecalho { break-inside: avoid; page-break-inside: avoid; } .documento-meta, .documento-titulo-destaque, .documento-declaracao { break-inside: avoid; page-break-inside: avoid; } .documento-dados { break-inside: avoid; page-break-inside: avoid; } /* MATERIAIS PODEM CONTINUAR EM OUTRA PÁGINA. */ .documento-listagem-entrega { break-inside: auto; page-break-inside: auto; } /* TABELAS: REPETIR CABEÇALHO NAS PÁGINAS E EVITAR CORTAR UM ITEM AO MEIO. */ .documento-tabela-container { overflow: visible !important; } .documento-tabela { width: 100% !important; page-break-inside: auto; } .documento-tabela thead { display: table-header-group; } .documento-tabela tfoot { display: table-footer-group; } .documento-tabela tr { break-inside: avoid; page-break-inside: avoid; } /* ASSINATURAS: MANTER AS TRÊS JUNTAS, SEM DIVIDIR O BLOCO ENTRE FOLHAS. */ .documento-assinaturas, .assinaturas-entrega, .assinatura-bloco { break-inside: avoid; page-break-inside: avoid; } /* A LOGO E A MARCA-D'ÁGUA CONTINUAM COM O MESMO TAMANHO. */ .documento-logo-imagem { display: block !important; object-fit: contain !important; } .documento-marca-dagua { opacity: .065 !important; pointer-events: none; } .documento-marca-dagua img { display: block !important; object-fit: contain !important; } /* IMPEDIR QUE O RODAPÉ FIQUE SEPARADO EM DUAS LINHAS POR UMA QUEBRA DE PÁGINA. */ .documento-rodape { break-inside: avoid; page-break-inside: avoid; } } /* ========================================================== 66. REDUÇÃO DE MOVIMENTO ========================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ========================================================== HAS SUPPLY 1.0 ATUALIZAÇÃO: IMPRESSÃO CORPORATIVA PROFISSIONAL PADRÃO A4 IDENTIDADE VISUAL OFICIAL MARGENS DEFINIDAS BORDAS VISÍVEIS TABELAS PROFISSIONAIS PRÉ-VISUALIZAÇÃO E IMPRESSÃO PADRONIZADAS ========================================================== */ /* ========================================================== 01. PRÉ-VISUALIZAÇÃO ========================================================== */ .preview-conteudo { padding: 30px 20px; background: #E7ECF3; border-radius: 12px; overflow: auto; color-scheme: light; } /* ========================================================== 02. DOCUMENTO A4 ========================================================== */ .documento-corporativo { position: relative; isolation: isolate; display: block; width: 210mm; max-width: none; min-height: 297mm; margin: 0 auto; padding: 15mm 16mm 13mm; background: #FFFFFF; color: #17263E; border: 1px solid #C3CDDA; border-radius: 0; box-shadow: 0 12px 35px rgba(0, 0, 0, .15); font-family: Arial, Helvetica, sans-serif; font-size: 10pt; line-height: 1.5; overflow: visible; overflow-wrap: anywhere; } .documento-corporativo, .documento-corporativo * { box-sizing: border-box; } .documento-corporativo > *:not( .documento-marca-dagua ) { position: relative; z-index: 1; } /* ========================================================== 03. CABEÇALHO CORPORATIVO ========================================================== */ .documento-corporativo .documento-cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 25mm; margin-bottom: 8mm; padding-bottom: 5mm; border-bottom: 2.5px solid #004AAB; } .documento-corporativo .documento-marca { display: flex; align-items: center; gap: 13px; min-width: 0; } .documento-corporativo .documento-logo { display: flex; align-items: center; justify-content: center; width: 21mm; height: 21mm; flex-shrink: 0; background: #004AAB; border-radius: 3mm; overflow: hidden; } .documento-corporativo .documento-logo-imagem { display: block; width: 100%; height: 100%; object-fit: contain; } .documento-corporativo .documento-marca h1 { margin: 0 0 4px; color: #004AAB; font-size: 17pt; font-weight: 900; letter-spacing: -.4px; line-height: 1.2; } .documento-corporativo .documento-marca p { margin: 0; color: #526780; font-size: 8.5pt; line-height: 1.45; } /* ========================================================== 04. IDENTIFICAÇÃO DO DOCUMENTO ========================================================== */ .documento-corporativo .documento-identificacao { max-width: 76mm; text-align: right; } .documento-corporativo .documento-identificacao strong { display: block; color: #003780; font-size: 10pt; font-weight: 900; line-height: 1.45; text-transform: uppercase; letter-spacing: .15px; } .documento-corporativo .documento-identificacao p { margin: 6px 0 0; color: #536981; font-size: 8.5pt; font-weight: 600; } /* ========================================================== 05. QUADRO DE INFORMAÇÕES ========================================================== */ .documento-corporativo .documento-dados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5mm 8mm; margin-bottom: 8mm; padding: 5mm; background: #F7FAFF; border: 1px solid #AFC2DC; border-radius: 2mm; } .documento-corporativo .doc-campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .documento-corporativo .doc-campo strong { display: block; color: #536782; font-size: 8pt; font-weight: 800; line-height: 1.4; } .documento-corporativo .doc-campo span { display: block; color: #17263E; font-size: 10pt; font-weight: 700; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; } .documento-corporativo .doc-campo-largo { grid-column: 1 / -1; } /* ========================================================== 06. INFORMAÇÕES DE EMISSÃO ========================================================== */ .documento-corporativo .documento-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 8mm; padding: 4mm 5mm; background: #F1F6FD; border: 1px solid #B5C8DF; border-radius: 2mm; } .documento-corporativo .documento-meta span { color: #536782; font-size: 8.5pt; } .documento-corporativo .documento-meta strong { color: #003780; font-weight: 800; } /* ========================================================== 07. TABELAS DOS DOCUMENTOS ========================================================== */ .documento-corporativo .documento-tabela-container { width: 100%; overflow: visible; } .documento-corporativo .documento-tabela { width: 100%; border-collapse: collapse; border-spacing: 0; table-layout: auto; background: #FFFFFF; color: #17263E; border: 1px solid #8199B8; font-family: Arial, Helvetica, sans-serif; font-size: 9pt; } /* ========================================================== 08. CABEÇALHO DA TABELA ========================================================== */ .documento-corporativo .documento-tabela thead { background: #E5EFFB; } .documento-corporativo .documento-tabela th { padding: 3.2mm 2.2mm; background: #E5EFFB; color: #003780; border: 1px solid #8BA3C1; font-size: 8pt; font-weight: 900; line-height: 1.4; text-align: left; text-transform: uppercase; vertical-align: middle; white-space: normal; overflow-wrap: normal; } /* ========================================================== 09. LINHAS DA TABELA ========================================================== */ .documento-corporativo .documento-tabela td { padding: 3.2mm 2.2mm; min-height: 10mm; background: #FFFFFF; color: #23364E; border: 1px solid #A3B5CC; font-size: 8.8pt; line-height: 1.5; text-align: left; vertical-align: middle; overflow-wrap: anywhere; } .documento-corporativo .documento-tabela tbody tr:nth-child(even) td { background: #F7FAFE; } .documento-corporativo .documento-tabela tbody tr:hover { background: transparent; } /* ========================================================== 10. COLUNA DE SITUAÇÃO CAMPO LIVRE PARA ANOTAÇÕES MANUAIS ========================================================== */ .documento-corporativo .documento-tabela .coluna-situacao { min-width: 18mm; height: 11mm; background: #FFFFFF; } /* ========================================================== 11. TOTALIZAÇÃO ========================================================== */ .documento-corporativo .documento-tabela tfoot { background: #E5EFFB; } .documento-corporativo .documento-tabela tfoot td { padding: 3.6mm 2.5mm; background: #E5EFFB; color: #003780; border: 1px solid #8BA3C1; border-top: 2px solid #004AAB; font-size: 9pt; font-weight: 900; vertical-align: middle; } .documento-corporativo .doc-total-label { text-align: right !important; letter-spacing: .2px; } .documento-corporativo .doc-total-valor { text-align: right !important; color: #003780 !important; font-size: 10pt !important; font-weight: 900 !important; white-space: nowrap; } .documento-corporativo .doc-total-complemento { background: #E5EFFB; } /* ========================================================== 12. RELATÓRIO DE ESTOQUE ========================================================== */ .documento-estoque .documento-tabela th:nth-child(n+4), .documento-estoque .documento-tabela td:nth-child(n+4) { text-align: right; } .documento-estoque .documento-tabela td:nth-child(2) { text-align: left; } /* ========================================================== 13. COMPROVANTE DE ENTREGA ========================================================== */ .documento-corporativo .documento-titulo-destaque { margin-bottom: 7mm; padding: 4mm 5mm; background: #EAF2FC; border: 1px solid #B6C9E0; border-left: 4px solid #004AAB; border-radius: 1mm; } .documento-corporativo .documento-titulo-destaque h2 { margin: 0; color: #003780; font-size: 11pt; font-weight: 900; } .documento-corporativo .documento-titulo-destaque p { margin: 5px 0 0; color: #576B83; font-size: 8.5pt; } .documento-corporativo .documento-listagem-entrega { margin-top: 6mm; margin-bottom: 7mm; } .documento-corporativo .documento-listagem-entrega h3 { margin: 0 0 3mm; color: #003780; font-size: 10pt; font-weight: 900; letter-spacing: .15px; } /* ========================================================== 14. REGISTRO DE RESPONSABILIDADES ========================================================== */ .documento-corporativo .documento-declaracao { margin-top: 7mm; padding: 4mm 5mm; background: #EFF5FC; border: 1px solid #B5C9E0; border-radius: 2mm; } .documento-corporativo .documento-declaracao h3 { margin: 0 0 6px; color: #003780; font-size: 9pt; font-weight: 900; } .documento-corporativo .documento-declaracao p { margin: 0; color: #384D66; font-size: 8.5pt; line-height: 1.65; } /* ========================================================== 15. ASSINATURAS ========================================================== */ .documento-corporativo .documento-assinaturas { display: flex; justify-content: space-between; gap: 20px; margin-top: 16mm; } .documento-corporativo .assinatura-campo { flex: 1; text-align: center; } .documento-corporativo .assinatura-linha { height: 11mm; margin-bottom: 3mm; border-bottom: 1px solid #526780; } .documento-corporativo .assinatura-campo span { color: #394E67; font-size: 8.5pt; } /* ========================================================== 16. TRÊS ASSINATURAS DA ENTREGA ========================================================== */ .documento-corporativo .assinaturas-entrega { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5mm; margin-top: 13mm; } .documento-corporativo .assinatura-bloco { min-width: 0; text-align: center; } .documento-corporativo .assinatura-bloco .assinatura-linha { height: 10mm; margin-bottom: 3mm; } .documento-corporativo .assinatura-bloco strong { display: block; min-height: 9mm; margin-bottom: 2mm; color: #003780; font-size: 7.4pt; font-weight: 900; line-height: 1.4; } .documento-corporativo .assinatura-bloco p { margin: 0; color: #40546E; font-size: 7.4pt; line-height: 2; white-space: normal; } /* ========================================================== 17. OBSERVAÇÕES ========================================================== */ .documento-corporativo .documento-observacoes { margin-top: 9mm; padding-top: 4mm; border-top: 1px solid #ACBDD2; } .documento-corporativo .documento-observacoes > strong { display: block; margin-bottom: 3mm; color: #003780; font-size: 9pt; font-weight: 900; } .documento-corporativo .documento-observacoes > p { color: #40546E; font-size: 8.5pt; white-space: pre-wrap; } .documento-corporativo .linhas-observacoes { display: flex; flex-direction: column; gap: 5mm; } .documento-corporativo .linhas-observacoes span { display: block; height: 5mm; border-bottom: 1px solid #BAC8DA; } /* ========================================================== 18. MARCA-D'ÁGUA ========================================================== */ .documento-corporativo .documento-marca-dagua { position: absolute; top: 46%; left: 50%; width: 65%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; z-index: 0; opacity: .065; pointer-events: none; } .documento-corporativo .documento-marca-dagua img { display: block; width: 100%; max-width: 120mm; max-height: 120mm; object-fit: contain; filter: none; } /* ========================================================== 19. RODAPÉ CORPORATIVO ========================================================== */ .documento-corporativo .documento-rodape { margin-top: 9mm; padding-top: 4mm; border-top: 1px solid #A9BCD4; color: #63768D; text-align: center; font-size: 8pt; line-height: 1.6; } .documento-corporativo .documento-rodape p { margin: 0; } .documento-corporativo .documento-rodape p + p { margin-top: 3px; } /* ========================================================== 20. CONFIGURAÇÃO DO PAPEL ========================================================== */ @page { size: A4 portrait; margin: 0; } /* ========================================================== 21. REGRAS EXCLUSIVAS DA IMPRESSÃO ========================================================== */ @media print { html, body { width: 210mm !important; min-height: 0 !important; height: auto !important; margin: 0 !important; padding: 0 !important; background: #FFFFFF !important; overflow: visible !important; } /* ESCONDER TODA A INTERFACE DO SISTEMA. */ body.print-mode > :not(#area-impressao) { display: none !important; } /* EXIBIR APENAS O DOCUMENTO. */ body.print-mode #area-impressao { display: block !important; position: static !important; width: 210mm !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; background: #FFFFFF !important; overflow: visible !important; } /* MESMAS MARGENS, FONTES E BORDAS DA PRÉ-VISUALIZAÇÃO. NÃO MANTER ALTURA MÍNIMA DE 297MM, POIS ISSO PODE CRIAR UMA SEGUNDA FOLHA. */ body.print-mode #area-impressao .documento-corporativo { position: relative !important; width: 210mm !important; max-width: 210mm !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 15mm 16mm 13mm !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; background: #FFFFFF !important; color: #17263E !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 10pt !important; line-height: 1.5 !important; overflow: visible !important; } /* SOLICITAR IMPRESSÃO DAS CORES. */ .documento-corporativo, .documento-corporativo * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } /* CABEÇALHO SEM QUEBRA. */ .documento-cabecalho, .documento-meta, .documento-titulo-destaque, .documento-dados, .documento-declaracao { break-inside: avoid; page-break-inside: avoid; } /* TABELA COM CABEÇALHO REPETIDO QUANDO HOUVER VÁRIAS PÁGINAS. */ .documento-tabela-container { overflow: visible !important; } .documento-tabela { width: 100% !important; border-collapse: collapse !important; page-break-inside: auto; } .documento-tabela thead { display: table-header-group; } .documento-tabela tfoot { display: table-footer-group; } .documento-tabela tr { break-inside: avoid; page-break-inside: avoid; } /* BORDAS SEMPRE VISÍVEIS, MESMO QUANDO O NAVEGADOR NÃO IMPRIME O FUNDO COLORIDO. */ .documento-corporativo .documento-tabela th { border: 1px solid #829AB8 !important; } .documento-corporativo .documento-tabela td { border: 1px solid #9AACC5 !important; } /* ASSINATURAS NÃO DEVEM SER CORTADAS AO MEIO. */ .documento-assinaturas, .assinaturas-entrega, .assinatura-bloco, .documento-rodape { break-inside: avoid; page-break-inside: avoid; } /* PRESERVAR A LOGO OFICIAL. */ .documento-logo-imagem { display: block !important; object-fit: contain !important; } .documento-marca-dagua { opacity: .065 !important; } .documento-marca-dagua img { filter: none !important; } } /* ========================================== HAS SUPPLY - BORDAS DE IMPRESSÃO ========================================== */ @media print { body.print-mode #area-impressao .documento-tabela { border-collapse: collapse !important; border: 1.5px solid #365B82 !important; } body.print-mode #area-impressao .documento-tabela th, body.print-mode #area-impressao .documento-tabela td { border: 1.25px solid #557595 !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } body.print-mode #area-impressao .documento-dados { border: 1.5px solid #8DA8C6 !important; } body.print-mode #area-impressao .documento-cabecalho { border-bottom: 2.5px solid #004AAB !important; } body.print-mode #area-impressao .assinatura-linha { border-bottom: 1.5px solid #365B82 !important; } } /* ========================================================== FIM DO CSS HAS SUPPLY 1.0 ========================================================== */