/* * Visual novo nas telas do legado (Dashboard, Relatórios, Clientes, Matrizes, Certificados, Usuários, E-mails, * telas de detalhe e cadastro): mesma paleta, tipografia e acabamento do protótipo (PROT_MENSAGEIRO_TTAX), sem * reescrever o HTML de cada tela. Preso a "#content .container-fluid", que as telas novas (.tx-page) não usam. */ #content .container-fluid { --lg-ink: #0e1b2c; --lg-ink-2: #3a4757; --lg-muted: #5b6778; --lg-border: #e3e8ef; --lg-border-input: #d5dde8; --lg-row: #edf1f6; --lg-navy: #0c1a2b; --lg-navy-2: #16283e; --lg-primary: #1677c9; padding-left: 32px; padding-right: 32px; padding-bottom: 32px; color: var(--lg-ink); } /* Título da página */ #content .container-fluid h1.h3, #content .container-fluid .text-titulo { font-size: 26px; font-weight: 800; letter-spacing: -.5px; color: var(--lg-ink) !important; } #content .container-fluid .text-gray-800 { color: var(--lg-ink) !important; } #content .container-fluid .text-gray-600, #content .container-fluid .text-gray-500 { color: var(--lg-muted) !important; } #content .container-fluid .text-gray-300 { color: #c3ccd8 !important; } /* Cartões */ #content .container-fluid .card { border: 1px solid var(--lg-border); border-radius: 14px; box-shadow: none !important; overflow: hidden; } #content .container-fluid .card.shadow { box-shadow: none !important; } #content .container-fluid .card-header { background: #fff; border-bottom: 1px solid var(--lg-border); padding: 14px 18px; } #content .container-fluid .card-header, #content .container-fluid .card-header h6 { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--lg-muted); } #content .container-fluid .card-header .text-danger, #content .container-fluid .card-header .text-primary { color: var(--lg-muted) !important; } #content .container-fluid .card-body { padding: 18px; } /* Cartões de número do Dashboard (border-left-*) */ #content .container-fluid .card[class*="border-left-"] { border-left-width: 1px !important; } #content .container-fluid .card[class*="border-left-"] .card-body { position: relative; padding-left: 22px; } #content .container-fluid .card[class*="border-left-"] .card-body::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px; border-radius: 0 4px 4px 0; background: var(--lg-primary); } #content .container-fluid .card.border-left-success .card-body::before { background: #1f9d5c; } #content .container-fluid .card.border-left-warning .card-body::before { background: #e09a1a; } #content .container-fluid .card.border-left-danger .card-body::before { background: #d93a2e; } #content .container-fluid .card.border-left-info .card-body::before { background: #1677c9; } #content .container-fluid .text-xs.text-uppercase { letter-spacing: .06em; color: var(--lg-muted) !important; } #content .container-fluid .h5.font-weight-bold { font-size: 24px; font-weight: 800 !important; color: var(--lg-ink) !important; } /* Filtro ativo: em vez do verde forte, a borda azul do protótipo */ #content .container-fluid .bg-filtrando { background: #fff !important; background-image: none !important; box-shadow: inset 0 0 0 2px #b9d4f1; } /* Campos */ #content .container-fluid label { font-size: 13px; font-weight: 600; color: var(--lg-ink-2); margin-bottom: 6px; } #content .container-fluid .form-control, #content .container-fluid .custom-select { min-height: 40px; border: 1px solid var(--lg-border-input); background-color: #fff; color: var(--lg-ink); font-size: 14px; box-shadow: none; } #content .container-fluid .form-control:focus, #content .container-fluid .custom-select:focus { border-color: var(--lg-primary); background-color: #fff; box-shadow: 0 0 0 3px rgba(22, 119, 201, .15); } #content .container-fluid .form-control:disabled, #content .container-fluid .form-control[readonly] { background-color: #eef1f5; color: var(--lg-ink-2); } .tx-senha { position: relative; } .tx-senha .form-control { padding-right: 44px; } .tx-senha .olho-senha { position: absolute; top: 50%; right: 8px; left: auto; width: 28px; height: 28px; transform: translateY(-50%); border: 0; background: transparent; padding: 0; cursor: pointer; z-index: 3; } .tx-senha .olho-senha img { width: 22px; height: 22px; display: block; margin: 0 auto; } .tx-senha .olho-senha:disabled { opacity: .45; cursor: default; } /* Lista do select: o menu nativo fica azul e quadrado. Esta lista segue o painel. */ .tx-select-menu { position: fixed; z-index: 4000; margin: 0; padding: 6px; background: #fff; border: 1px solid #dfe5ed; border-radius: 10px; box-shadow: 0 10px 28px rgba(12, 26, 43, .14); overflow: auto; } .tx-select-opt { display: block; width: 100%; text-align: left; border: 0; background: transparent; border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 14px; font-weight: 600; color: #1c2430; cursor: pointer; } .tx-select-opt:hover { background: #f3f6fa; } .tx-select-opt.is-sel { background: #e8eef5; color: #0d2032; } .tx-select-opt:disabled { color: #8b95a3; cursor: default; } /* Botões */ #content .container-fluid .btn { font-weight: 700; font-size: 14px; min-height: 40px; box-shadow: none !important; } #content .container-fluid .btn-sm { min-height: 32px; font-size: 13px; } #content .container-fluid .btn-primary, #content .container-fluid .btn-dark { background: var(--lg-navy); border-color: var(--lg-navy); color: #fff; } #content .container-fluid .btn-primary:hover, #content .container-fluid .btn-dark:hover { background: var(--lg-navy-2); border-color: var(--lg-navy-2); } #content .container-fluid .btn-success { background: var(--lg-primary); border-color: var(--lg-primary); } #content .container-fluid .btn-outline-secondary, #content .container-fluid .btn-secondary, #content .container-fluid .btn-light { background: #fff; border: 1px solid var(--lg-border-input); color: var(--lg-ink); } #content .container-fluid .btn-outline-secondary:hover, #content .container-fluid .btn-secondary:hover, #content .container-fluid .btn-light:hover { background: #eef2f7; color: var(--lg-ink); border-color: var(--lg-border-input); } #content .container-fluid .btn-outline-primary { color: var(--lg-primary); border-color: #b9d4f1; background: #fff; } #content .container-fluid .btn-outline-primary:hover { background: #e8f1fb; color: #0d4d8c; } #content .container-fluid .btn-danger { background: #d93a2e; border-color: #d93a2e; } /* Tabelas */ #content .container-fluid .table { color: var(--lg-ink); font-size: 14px; margin-bottom: 0; } #content .container-fluid .table thead th { background: #f8fafc; border-top: 0; border-bottom: 1px solid var(--lg-border); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--lg-ink-2); white-space: nowrap; padding: 12px 10px; } #content .container-fluid .table td { border-top: 1px solid var(--lg-row); padding: 12px 10px; vertical-align: middle; } #content .container-fluid .table-striped tbody tr:nth-of-type(odd) { background: transparent; } #content .container-fluid .table-hover tbody tr:hover { background: #f7f9fc; color: var(--lg-ink); } #content .container-fluid .table-responsive { border-radius: 12px; } /* Selos (badge) no formato pílula do protótipo */ #content .container-fluid .badge { border-radius: 99px; padding: 5px 10px; font-size: 12px; font-weight: 700; } #content .container-fluid .badge-success { background: #e5f5ec; color: #12633a; } #content .container-fluid .badge-warning { background: #fff3dd; color: #7d4c00; } #content .container-fluid .badge-danger { background: #fdeceb; color: #a3241b; } #content .container-fluid .badge-info, #content .container-fluid .badge-primary { background: #e6f0fb; color: #0b4f91; } #content .container-fluid .badge-secondary { background: #eef0f3; color: #3f4a58; } /* Paginação */ #content .container-fluid .pagination .page-link { min-width: 36px; height: 36px; margin: 0 3px; border-radius: 8px !important; border: 1px solid var(--lg-border-input); color: var(--lg-ink-2); font-weight: 700; text-align: center; } #content .container-fluid .pagination .page-item.active .page-link { background: var(--lg-navy); border-color: var(--lg-navy); color: #fff; } /* Abas (telas de detalhe) */ #content .container-fluid .nav-tabs { border-bottom: 1px solid var(--lg-border); } #content .container-fluid .nav-tabs .nav-link { border: 0; border-bottom: 3px solid transparent; color: var(--lg-muted); font-weight: 600; } #content .container-fluid .nav-tabs .nav-link.active { color: var(--lg-ink); font-weight: 800; border-bottom-color: var(--lg-primary); background: transparent; } /* Modais e alertas */ .modal-content { border: 0; border-radius: 16px; box-shadow: 0 24px 60px rgba(12, 26, 43, .28); font-family: Manrope, system-ui, sans-serif; } #content .container-fluid .alert { border-radius: 12px; border: 1px solid transparent; font-size: 14px; } #content .container-fluid .alert-info { background: #e6f0fb; border-color: #b9d4f1; color: #0b4f91; } #content .container-fluid .alert-warning { background: #fff3dd; border-color: #f2d49b; color: #7d4c00; } #content .container-fluid .alert-success { background: #e5f5ec; border-color: #b7e2c8; color: #12633a; } #content .container-fluid .alert-danger { background: #fdeceb; border-color: #f4c3bf; color: #a3241b; } #content .container-fluid .alert-secondary { background: #f3f5f8; border-color: var(--lg-border); color: var(--lg-ink-2); } /* Rodapé de todas as telas (fica fora do .container-fluid): sem o degradê antigo. */ #content-wrapper .sticky-footer { background: transparent !important; background-image: none !important; border-top: 1px solid #e3e8ef; padding: 12px 0; color: #5b6778; font-size: 12px; } #content-wrapper .sticky-footer .ttax-rodape { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 10px; background: #fff; border-radius: 999px; box-shadow: 0 6px 16px rgba(12, 26, 43, .08); } #content-wrapper .sticky-footer .ttax-rodape img { height: 28px; width: auto; vertical-align: middle; } #content-wrapper .sticky-footer .ttax-rodape span { color: #1c2838; font-size: 13px; font-weight: 700; letter-spacing: .2px; } .scroll-to-top { border-radius: 10px !important; background: #0c1a2b !important; } @media (max-width: 760px) { #content .container-fluid { padding-left: 16px; padding-right: 16px; } #content .container-fluid .d-sm-flex.justify-content-between { gap: 10px; flex-wrap: wrap; } } html:has(body.tx-embed), body.tx-embed { height: 100%; overflow: hidden; } body.tx-embed #accordionSidebar, body.tx-embed .tx-backdrop, body.tx-embed .tx-hdr, body.tx-embed .sticky-footer, body.tx-embed .scroll-to-top, body.tx-embed #content .container-fluid > .d-flex { display: none !important; } /* Só a área do conteúdo rola dentro do drawer: o fundo (#content-wrapper) não ganha a segunda barra. */ body.tx-embed #wrapper #content-wrapper { width: 100%; margin: 0; height: 100%; min-height: 0; overflow: hidden; } body.tx-embed #wrapper { height: 100%; min-height: 0; } /* Mesma especificidade da regra do tema (#wrapper #content-wrapper #content { flex: 1 0 auto }), senão ela vence e o conteúdo não encolhe. */ body.tx-embed #wrapper #content-wrapper #content { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; } body.tx-embed #content .container-fluid { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 12px; } /* Abas em