/* ============================================================ Portal da Contabilidade — Design System (alinhado ao ERP) Reaproveita a linguagem visual do "Modal de Detalhes de Títulos" (_view/tit_arec_titulo/listagem.php): tiles det-*, badges pastel, cards KPI. Depende de bootstrap.min.css + style.css do ERP. ============================================================ */ /* Inter self-hosted (variable, latin) — 100% local, sem Google Fonts. Elimina o FOUT: com o no , a fonte fica pronta no 1º paint. woff2 em _boot/fonts/ (mesma base de _boot/css/). */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; /* variable */ font-display: swap; src: url('../fonts/inter-latin-wght-normal.woff2') format('woff2-variations'); } :root { --portal-bg: #f4f6fb; --portal-sidebar-bg: #506fe4; /* azul do ERP */ --portal-accent: #506fe4; /* azul primário do ERP */ --portal-accent-dark: #3b56c9; --portal-border: #e9edf5; --portal-muted: #5f6b7e; /* mais escuro p/ legibilidade (labels/subtítulos) */ --portal-muted-soft: #7c889b; /* variante suave p/ subtextos discretos */ --portal-text: #263243; --portal-sidebar-w: 230px; /* menu expandido (ícone + nome lado a lado) */ --portal-content-max: 1500px; --portal-font: 'Inter', 'Segoe UI Variable', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif; } /* ---------- Layout shell ---------- */ body.portal-body { background: var(--portal-bg); margin: 0; min-height: 100vh; font-family: var(--portal-font); color: var(--portal-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .portal-wrap { display: flex; min-height: 100vh; } /* ---------- Sidebar (estilo ERP: vertical, ícone acima / nome abaixo, azul) ---------- */ .portal-sidebar { width: var(--portal-sidebar-w); background: var(--portal-sidebar-bg); box-shadow: 3px 0 16px rgba(0,0,0,.12); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 1040; transition: transform .2s ease; } .portal-sidebar .brand { display: flex; flex-direction: row; align-items: center; gap: 11px; padding: 18px 18px 16px; border-bottom: 1px solid rgba(255,255,255,.15); } .portal-sidebar .brand .brand-ico { width: 40px; height: 40px; border-radius: 10px; flex: 0 0 40px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.18); color: #fff; font-size: 20px; } .portal-sidebar .brand .brand-txt { font-weight: 800; font-size: 17px; letter-spacing: -.2px; color: #fff; line-height: 1.05; } .portal-sidebar .brand .brand-txt br { display: none; } .portal-sidebar .brand .brand-txt span { color: #d7e0ff; } .portal-nav { list-style: none; margin: 0; padding: 10px 0; overflow-y: auto; overflow-x: hidden; flex: 1; } .portal-nav li { margin: 0; } .portal-nav a { display: flex; flex-direction: row; align-items: center; gap: 13px; padding: 11px 16px; margin: 3px 12px; border-radius: 8px; color: rgba(255,255,255,.9); text-decoration: none; } .portal-nav a i { font-size: 19px; line-height: 1; width: 22px; text-align: center; flex: 0 0 22px; } .portal-nav a span { font-size: 13.5px; font-weight: 600; letter-spacing: .1px; } .portal-nav a:hover { background: rgba(0,0,0,.16); color: #fff; } .portal-nav a.active { background: rgba(0,0,0,.3); color: #fff; } .portal-nav .nav-sep { padding: 12px 16px 5px; margin: 4px 12px 0; font-size: 9.5px; text-transform: uppercase; letter-spacing: .7px; color: rgba(255,255,255,.55); font-weight: 700; border-top: 1px solid rgba(255,255,255,.12); } .portal-nav .nav-sep:first-child { border-top: 0; } .portal-sidebar-footer { padding: 12px 18px; border-top: 1px solid rgba(255,255,255,.15); font-size: 10px; color: rgba(255,255,255,.6); } /* ---------- Main / topbar ---------- */ .portal-main { flex: 1; margin-left: var(--portal-sidebar-w); display: flex; flex-direction: column; min-width: 0; } .portal-topbar { background: #fff; border-bottom: 1px solid var(--portal-border); padding: 12px 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; position: sticky; top: 0; z-index: 1030; } .portal-topbar .topbar-toggle { display: none; background: none; border: 0; font-size: 20px; color: #5a6b85; } .portal-topbar .topbar-field { display: flex; flex-direction: column; gap: 2px; } .portal-topbar .topbar-field label { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--portal-muted); font-weight: 700; margin: 0; } .portal-topbar .topbar-spacer { flex: 1; } .portal-topbar .topbar-user { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #5a6b85; } .portal-topbar .topbar-user .avatar { width: 34px; height: 34px; border-radius: 50%; background: #eef2fd; color: var(--portal-accent); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; } .portal-content { padding: 22px; flex: 1; width: 100%; max-width: var(--portal-content-max); margin: 0 auto; } .portal-page-title { font-size: 22px; font-weight: 800; color: #1c2b45; margin: 0 0 2px; letter-spacing: -.4px; } .portal-page-sub { color: var(--portal-muted); font-size: 13.5px; margin: 0 0 20px; } /* ============================================================ Tokens portados do padrão-ouro (det-* / badges / KPI) ============================================================ */ /* Badges pastel */ .badge-pastel-info { background:#e3f2fd; color:#1565c0; } .badge-pastel-success { background:#e6f6ec; color:#1e7e34; } .badge-pastel-warning { background:#fff6e0; color:#9c6f00; } .badge-pastel-danger { background:#fdecec; color:#b71c1c; } .badge-pastel-primary { background:#eaeaf9; color:#4a3fbf; } .badge-pastel-secondary { background:#eef0f2; color:#5a6268; } /* ---------- Stat cards (clean, flat, modernos) ---------- */ .stat-card { background: #fff; border: 1px solid var(--portal-border); border-radius: 12px; padding: 16px 18px; display: flex; align-items: center; gap: 14px; transition: box-shadow .15s ease, transform .12s ease; height: 100%; } .stat-card:hover { box-shadow: 0 4px 14px rgba(16,24,40,.08); transform: translateY(-1px); } /* Base do ícone (vale em qualquer contexto — relatórios/downloads usam fora do stat-card) */ .stat-ico { display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; line-height: 1; } .stat-ico > i { line-height: 1; display: block; } .stat-card .stat-ico { width: 46px; height: 46px; border-radius: 12px; flex: 0 0 46px; display: flex; align-items: center; justify-content: center; font-size: 20px; } .stat-card .stat-body { min-width: 0; } .stat-card .stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--portal-muted); font-weight: 600; margin: 0 0 3px; } .stat-card .stat-value { font-size: 20px; font-weight: 700; color: #1c2b45; line-height: 1.15; white-space: normal; overflow-wrap: normal; word-break: normal; font-variant-numeric: tabular-nums; letter-spacing: -.3px; } .stat-card .stat-sub { font-size: 11px; color: var(--portal-muted-soft); margin-top: 2px; } /* tints suaves (fundo claro + ícone em cor sólida) */ .tint-blue { background: #eef2fd; color: #4e73df; } .tint-green { background: #e6f6ec; color: #1e7e34; } .tint-amber { background: #fff4e5; color: #e0770a; } .tint-red { background: #fdecec; color: #d9453a; } .tint-purple { background: #eeebfb; color: #6f42c1; } .tint-teal { background: #e2f6f4; color: #0f9d8f; } .tint-gray { background: #eef0f4; color: #5a6b85; } .tint-yellow { background: #fff8e1; color: #b8860b; } /* Cards KPI legados (mantidos para compat; sem uso na tela nova) */ .card-filtro-rapido { transition: box-shadow .15s ease; border: 1px solid var(--portal-border); border-radius: 12px; cursor: pointer; position: relative; } .card-filtro-rapido .kpi-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--portal-muted); } .card-filtro-rapido .kpi-valor { font-size: 20px; font-weight: 700; color: #1c2b45; } /* Tiles de detalhe */ .det-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; } .det-grid.two { grid-template-columns: repeat(2, 1fr); } .det-grid.three { grid-template-columns: repeat(3, 1fr); } @media (max-width: 575px) { .det-grid, .det-grid.two, .det-grid.three { grid-template-columns: repeat(2, 1fr); } } .det-tile { background: #fff; border: 1px solid var(--portal-border); border-radius: 8px; padding: 10px 12px; box-shadow: 0 1px 2px rgba(16,24,40,.04); } .det-label { text-transform: uppercase; font-size: 10.5px; letter-spacing: .5px; color: var(--portal-muted); font-weight: 600; margin-bottom: 2px; } .det-value { font-size: 14px; color: var(--portal-text); font-weight: 600; word-break: break-word; } .det-value small { font-weight: 400; color: var(--portal-muted); } .det-note { background: #fff; border: 1px solid var(--portal-border); border-left: 3px solid #506fe4; border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; } .det-note .det-label { color: #506fe4; } .det-card { background: #fff; border: 1px solid var(--portal-border); border-radius: 8px; overflow: hidden; margin-bottom: 12px; } .det-card > .det-card-head { padding: 8px 12px; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: #6c7a91; font-weight: 700; border-bottom: 1px solid #eef1f6; background: #fafbfe; } .det-items { width: 100%; margin: 0; } .det-items thead th { text-transform: uppercase; font-size: 10.5px; letter-spacing: .4px; color: var(--portal-muted); font-weight: 600; border: 0; border-bottom: 1px solid #eef1f6; padding: 8px 12px; } .det-items tbody td { padding: 9px 12px; border-top: 1px solid #f1f3f8; vertical-align: middle; font-size: 13px; } .det-items tbody tr:first-child td { border-top: 0; } .det-total { display: flex; justify-content: flex-end; align-items: baseline; gap: 8px; padding: 10px 12px; background: #f7f9fc; border-top: 1px solid #eef1f6; } .det-total .lbl { font-size: 12px; color: var(--portal-muted); text-transform: uppercase; letter-spacing: .4px; } .det-total .val { font-size: 18px; font-weight: 700; color: #0a7d34; } /* ---------- Cards genéricos ---------- */ .portal-card { background: #fff; border: 1px solid #e3e8f2; border-radius: 14px; box-shadow: 0 4px 20px rgba(16,24,40,.06); } .portal-card .portal-card-head { padding: 14px 18px; border-bottom: 1px solid var(--portal-border); font-weight: 700; font-size: 14px; color: #1c2b45; display: flex; align-items: center; justify-content: space-between; } .portal-card .portal-card-body { padding: 18px; } /* ---------- Tabela de dados (card com borda + sombra, densa e legível) ---------- */ .portal-table-container { background: #fff; border: 1px solid #e3e8f2; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 20px rgba(16,24,40,.06); } /* Cabeçalho do card da tabela (título + contagem + ações) */ .portal-table-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--portal-border); background: #fcfdff; } .portal-table-head .pth-title { font-size: 14px; font-weight: 700; color: #1c2b45; display: flex; align-items: center; gap: 8px; } .portal-table-head .pth-title i { color: var(--portal-accent); font-size: 17px; } .portal-table-head .pth-count { font-size: 12px; font-weight: 600; color: var(--portal-muted); background: #eef2fd; border-radius: 20px; padding: 2px 10px; } .portal-table-head .pth-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; } /* Área rolável da tabela com cabeçalho fixo (sticky) */ .portal-table-container .table-responsive { max-height: 62vh; overflow: auto; } .portal-table { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; } .portal-table thead th { background: #dde4f1; text-transform: uppercase; font-size: 11px; letter-spacing: .5px; color: #45526b; font-weight: 700; border: 0; border-bottom: 2px solid #cbd5ea; padding: 12px 16px; white-space: nowrap; position: sticky; top: 0; z-index: 3; } .portal-table tbody td { padding: 13px 16px; border-top: 1px solid #eef1f7; font-size: 13.5px; color: var(--portal-text); vertical-align: middle; line-height: 1.35; } .portal-table tbody tr:first-child td { border-top: 0; } .portal-table tbody tr:nth-child(even) { background: #f4f6fb; } /* zebra clara e sutil */ .portal-table tbody tr:hover { background: #e2ebfc; } /* hover azulado distinto, sem cursor pointer */ .portal-table tbody tr:hover td { border-color: #d3e0fb; } .portal-table .celula-trunc { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .col-valor { color: #12203a; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.2px; } /* Célula principal + subtexto (número, série, CNPJ) com contraste legível */ .cel-num { font-weight: 700; font-size: 14px; color: #1c2b45; font-variant-numeric: tabular-nums; } .cel-nome { font-weight: 600; color: #29364d; } .cel-sub { font-size: 12px; color: var(--portal-muted-soft); margin-top: 1px; font-variant-numeric: tabular-nums; } .cel-data { color: #3e4a5c; font-variant-numeric: tabular-nums; white-space: nowrap; } .table-footer-bar { padding: 12px 16px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--portal-border); background: #fcfdff; } .table-footer-bar .pagination .page-link { border-radius: 7px; margin: 0 2px; border-color: var(--portal-border); color: #5a6b85; font-weight: 600; } .table-footer-bar .pagination .page-item.active .page-link { background: var(--portal-accent); border-color: var(--portal-accent); color: #fff; } .table-footer-bar .pagination .page-item.disabled .page-link { color: #c2cad8; } /* ---------- Botão flutuante de suporte ---------- */ .portal-support-fab { position: fixed; right: 22px; bottom: 22px; z-index: 1055; width: 56px; height: 56px; border-radius: 50%; background: #25d366; color: #fff; border: 0; display: flex; align-items: center; justify-content: center; font-size: 26px; box-shadow: 0 6px 18px rgba(37,211,102,.45); text-decoration: none; transition: transform .12s ease; } .portal-support-fab:hover { transform: scale(1.06); color: #fff; } /* ---------- Banner rotativo (clean, card claro) ---------- */ .portal-banner { position: relative; background: #fff; border: 1px solid var(--portal-border); border-left: 4px solid var(--portal-accent); border-radius: 12px; overflow: hidden; margin-bottom: 20px; } .portal-banner .banner-slide { display: none; padding: 16px 20px; align-items: center; gap: 14px; } .portal-banner .banner-slide.active { display: flex; } .portal-banner .banner-ico { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; background: #eef2fd; color: var(--portal-accent); } .portal-banner .banner-slide h3 { font-size: 15px; font-weight: 700; margin: 0 0 2px; color: #1c2b45; } .portal-banner .banner-slide p { margin: 0; font-size: 13px; color: var(--portal-muted); } .portal-banner .banner-dots { position: absolute; bottom: 10px; right: 16px; display: flex; gap: 6px; } .portal-banner .banner-dots span { width: 7px; height: 7px; border-radius: 50%; background: #d5dbe6; cursor: pointer; } .portal-banner .banner-dots span.active { background: var(--portal-accent); } /* ---------- Ações rápidas ---------- */ .quick-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 20px; } .quick-action { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #fff; border: 1px solid var(--portal-border); border-radius: 12px; text-decoration: none; color: #1c2b45; transition: box-shadow .15s ease, transform .12s ease, border-color .15s ease; } .quick-action:hover { box-shadow: 0 4px 14px rgba(16,24,40,.08); transform: translateY(-1px); color: #1c2b45; border-color: #d7deea; } .quick-action .qa-ico { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; } .quick-action .qa-title { font-weight: 600; font-size: 14px; line-height: 1.15; } .quick-action .qa-sub { font-size: 11px; color: var(--portal-muted); } /* ---------- Título de seção ---------- */ .section-title { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--portal-muted); font-weight: 700; margin: 4px 0 12px; display: flex; align-items: center; gap: 8px; } .section-title .st-line { flex: 1; height: 1px; background: var(--portal-border); } /* ---------- Saudação ---------- */ .portal-greeting { font-size: 20px; font-weight: 800; color: #1c2b45; margin: 0 0 2px; letter-spacing: -.3px; } .portal-greeting-sub { color: var(--portal-muted); font-size: 13.5px; margin: 0 0 18px; } /* ---------- Situação geral (chips) ---------- */ .situacao-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; } @media (max-width: 767px) { .situacao-band { grid-template-columns: repeat(2, 1fr); } } .status-chip { background: #fff; border: 1px solid var(--portal-border); border-radius: 12px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; } .status-chip .sc-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 10px; } .status-chip .sc-label { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--portal-muted); font-weight: 600; } .status-chip .sc-value { font-size: 14px; font-weight: 700; color: #1c2b45; } .dot-green { background: #1cc88a; } .dot-amber { background: #f6a13e; } .dot-red { background: #e74a3b; } .dot-gray { background: #adb6c6; } .dot-blue { background: #4e73df; } /* ---------- Hero de pendências ---------- */ .hero-card { border-radius: 14px; padding: 20px 22px; display: flex; align-items: center; gap: 20px; margin-bottom: 18px; border: 1px solid transparent; } .hero-card.hero-alert { background: #fdecec; border-color: #f7c9c9; } .hero-card.hero-ok { background: #e6f6ec; border-color: #bfe6cd; } .hero-card .hero-num { font-size: 46px; font-weight: 800; line-height: 1; } .hero-alert .hero-num { color: #d9453a; } .hero-ok .hero-num { color: #1e7e34; } .hero-card .hero-txt h3 { font-size: 17px; font-weight: 700; color: #1c2b45; margin: 0 0 2px; } .hero-card .hero-txt p { margin: 0; font-size: 13px; color: #5a6b85; } .hero-card .hero-cta { margin-left: auto; } /* ---------- Comparativo (delta) ---------- */ .cmp { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 20px; } .cmp.up { color: #1e7e34; background: #e6f6ec; } .cmp.down { color: #d9453a; background: #fdecec; } .cmp.flat { color: #5a6b85; background: #eef0f4; } /* ---------- Saúde fiscal (ring) ---------- */ .saude-card { text-align: center; } .saude-ring { --val: 0; --col: #1cc88a; width: 118px; height: 118px; border-radius: 50%; margin: 4px auto 10px; display: flex; align-items: center; justify-content: center; background: conic-gradient(var(--col) calc(var(--val) * 1%), #eef0f4 0); } .saude-ring .inner { width: 92px; height: 92px; border-radius: 50%; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; } .saude-ring .inner b { font-size: 26px; color: #1c2b45; line-height: 1; } .saude-ring .inner span { font-size: 10px; color: var(--portal-muted); text-transform: uppercase; letter-spacing: .5px; } /* Certificado + Última emissão dentro do card de Saúde Fiscal */ .saude-extra { margin-top: 16px; border-top: 1px solid var(--portal-border); padding-top: 6px; text-align: left; } .saude-extra .se-row { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-radius: 8px; } .saude-extra .se-row + .se-row { border-top: 1px solid #f1f3f8; } .saude-extra .se-row .sc-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 10px; } .saude-extra .se-txt { min-width: 0; } .saude-extra .sc-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--portal-muted); font-weight: 600; } .saude-extra .sc-value { font-size: 13.5px; font-weight: 700; color: #1c2b45; } /* Detalhamento do índice de Saúde Fiscal (fatores + ação) */ .saude-detalhe { margin-top: 14px; border-top: 1px solid var(--portal-border); padding-top: 12px; text-align: left; } .saude-detalhe .sd-title { font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--portal-muted); font-weight: 700; margin-bottom: 8px; } .saude-detalhe .sd-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; color: #41506a; padding: 3px 0; } .saude-detalhe .sd-row .sd-pen { font-weight: 700; color: #d9453a; font-variant-numeric: tabular-nums; } .saude-detalhe .sd-ok { font-size: 12.5px; color: #1e7e34; display: flex; align-items: center; gap: 6px; } .saude-detalhe .sd-formula { font-size: 11px; color: var(--portal-muted-soft); margin-top: 8px; line-height: 1.35; } .saude-detalhe .sd-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 12.5px; font-weight: 600; color: var(--portal-accent); text-decoration: none; } .saude-detalhe .sd-cta:hover { text-decoration: underline; } /* Saúde Fiscal na horizontal (largura total: anel à esquerda, infos à direita) */ .saude-horizontal .portal-card-body { display: flex; align-items: center; gap: 26px; text-align: left; } .saude-horizontal .sh-ring { flex: 0 0 auto; } .saude-horizontal .sh-ring .saude-ring { margin: 0; } .saude-horizontal .sh-info { flex: 1; min-width: 0; } .saude-horizontal .sh-title { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; color: #1c2b45; margin-bottom: 12px; } .saude-horizontal .sh-title i { color: var(--portal-accent); } .saude-horizontal .sh-rows { display: flex; gap: 14px 32px; flex-wrap: wrap; } .saude-horizontal .sh-rows .se-row { display: flex; align-items: center; gap: 10px; } .saude-horizontal .sh-rows .se-row .sc-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 10px; } .saude-horizontal .sh-rows .sc-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--portal-muted); font-weight: 600; } .saude-horizontal .sh-rows .sc-value { font-size: 13.5px; font-weight: 700; color: #1c2b45; } .saude-horizontal .saude-detalhe { margin: 0; border-top: 0; padding: 0; } .saude-horizontal .sd-cta { margin-top: 0; } @media (max-width: 575px) { .saude-horizontal .portal-card-body { flex-direction: column; text-align: center; gap: 14px; } .saude-horizontal .sh-rows { justify-content: center; } } /* Legenda de status da lista de clientes */ .cli-legenda { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 9px 14px; border-top: 1px solid var(--portal-border); background: #fcfdff; } .cli-legenda .lg-item { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--portal-muted); font-weight: 600; } .cli-legenda .lg-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; } /* ---------- Timeline ---------- */ .timeline { position: relative; padding-left: 6px; } .timeline-item { display: flex; gap: 12px; padding: 8px 0; } .timeline-item .tl-ico { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; background: #eef2fd; color: var(--portal-accent); } .timeline-item .tl-body { min-width: 0; } .timeline-item .tl-txt { font-size: 13px; color: #1c2b45; font-weight: 500; } .timeline-item .tl-when { font-size: 11px; color: var(--portal-muted); } /* ---------- Cliente em atenção (escritório) ---------- */ .cli-atencao { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--portal-border); border-radius: 10px; margin-bottom: 8px; transition: box-shadow .15s ease; } .cli-atencao:hover { box-shadow: 0 3px 10px rgba(16,24,40,.07); } .cli-atencao .ca-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 10px; } .cli-atencao .ca-nome { font-weight: 600; font-size: 14px; color: #1c2b45; } .cli-atencao .ca-motivo { font-size: 12px; color: var(--portal-muted); } .cli-atencao .ca-cta { margin-left: auto; } /* ============================================================ Painel unificado (mestre-detalhe): faixa + lista + detalhe ============================================================ */ .esc-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 12px; margin-bottom: 16px; } /* Dashboard principal — cards drill-down */ .dash-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-top: 6px; } .dash-card { cursor: pointer; padding: 20px; align-items: flex-start; } .dash-card .stat-ico { width: 48px; height: 48px; flex: 0 0 48px; font-size: 21px; } .dash-card .stat-value { font-size: 30px; } .dash-card .dash-cta { margin-top: 10px; font-size: 12px; font-weight: 600; color: var(--portal-accent); display: inline-flex; align-items: center; gap: 5px; } .dash-card .dash-cta i { font-size: 14px; } .dash-card:hover { border-color: var(--portal-accent); box-shadow: 0 6px 18px rgba(80,111,228,.16); transform: translateY(-2px); } /* Indicadores: 3 por linha no desktop; 2 em telas médias; 1 no mobile. minmax(0,1fr) permite os cards encolherem sem transbordar o número. */ .indic-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 8px; } @media (max-width: 767px) { .indic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 420px) { .indic-grid { grid-template-columns: 1fr; } } .esc-filter { cursor: pointer; transition: box-shadow .15s ease, border-color .15s ease, transform .12s ease; } .esc-filter:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(16,24,40,.08); } .esc-filter.active { border-color: var(--portal-accent); box-shadow: 0 0 0 2px rgba(80,111,228,.18); } .portal-md { display: grid; grid-template-columns: 340px 1fr; gap: 16px; align-items: start; } /* Master (lista de clientes) */ .cli-panel { background: #fff; border: 1px solid #e3e8f2; border-radius: 14px; box-shadow: 0 4px 20px rgba(16,24,40,.06); display: flex; flex-direction: column; position: sticky; top: 78px; max-height: calc(100vh - 100px); overflow: hidden; } .cli-search { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--portal-border); color: var(--portal-muted); } .cli-search i { font-size: 16px; } .cli-search input { border: 0; outline: 0; width: 100%; font-size: 13px; color: var(--portal-text); background: transparent; } .cli-filtros { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 12px; border-bottom: 1px solid var(--portal-border); } .cli-filtros .chip { border: 1px solid #d7deea; background: #fff; color: #5a6b85; border-radius: 20px; padding: 3px 10px; font-size: 11.5px; font-weight: 600; cursor: pointer; line-height: 1.4; } .cli-filtros .chip:hover { border-color: #b8c2d4; } .cli-filtros .chip.active { background: var(--portal-accent); border-color: var(--portal-accent); color: #fff; } .cli-list { overflow-y: auto; flex: 1; } .cli-row { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid #f1f3f8; cursor: pointer; transition: background .12s ease; } .cli-row:hover { background: #f5f8ff; } .cli-row.active { background: #eef4ff; box-shadow: inset 3px 0 0 var(--portal-accent); } .cli-row .cli-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 10px; } .cli-row .cli-info { min-width: 0; } .cli-row .cli-nome { font-weight: 600; font-size: 13.5px; color: #1c2b45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cli-row .cli-motivo { font-size: 11.5px; color: var(--portal-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cli-foot { padding: 10px 14px; font-size: 11.5px; color: var(--portal-muted); border-top: 1px solid var(--portal-border); background: #fcfdff; } /* Detail (painel do cliente) */ .pn-detail { min-width: 0; } .detail-state { text-align: center; padding: 72px 24px; background: #fff; border: 1px solid #e3e8f2; border-radius: 14px; box-shadow: 0 4px 20px rgba(16,24,40,.06); color: var(--portal-muted); } .detail-state > i { font-size: 46px; opacity: .35; display: block; margin-bottom: 14px; } .detail-state h3 { font-size: 18px; color: #1c2b45; font-weight: 700; margin: 0 0 6px; } .detail-state p { font-size: 13.5px; margin: 0 auto 18px; max-width: 460px; } .detail-error > i { color: #e0770a; opacity: .55; } /* Detalhe carregado: contido num card. Fundo levemente tonalizado p/ os sub-cards brancos destacarem (melhor contraste/profundidade). */ .detail-panel { background: #f5f7fc; border: 1px solid #dfe4ee; border-radius: 14px; box-shadow: 0 6px 24px rgba(16,24,40,.07); padding: 20px; } .detail-panel > *:last-child { margin-bottom: 0; } .detail-panel .row:last-child .mb-3:last-child { margin-bottom: 0; } /* Sub-cards internos: brancos, borda nítida + sombra sutil (destacam do fundo tonalizado) */ .detail-panel .portal-card, .detail-panel .stat-card { background: #fff; border-color: #e4e9f3; box-shadow: 0 1px 3px rgba(16,24,40,.06); } .detail-panel .stat-card:hover { box-shadow: 0 4px 14px rgba(16,24,40,.10); border-color: #d7deea; } /* Títulos de seção com mais contraste + linha mais visível */ .detail-panel .section-title { color: #41506a; } .detail-panel .section-title .st-line { background: #dfe4ee; } /* ícone dentro do botão de retry: normal (branco, inline) */ .detail-state .btn i { font-size: inherit; opacity: 1; display: inline; margin: 0; } @media (max-width: 991px) { .esc-strip { grid-template-columns: repeat(2, 1fr); } .portal-md { grid-template-columns: 1fr; } .cli-panel { position: static; max-height: none; } .cli-list { max-height: 420px; } } /* ---------- Badge de documento (modelo destacado) ---------- */ .doc-badge { font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 6px; display: inline-flex; align-items: center; gap: 4px; } .doc-badge i { font-size: 12px; } .doc-nfe { background: #eef2fd; color: #4e73df; } .doc-nfce { background: #fff8e1; color: #b8860b; } .doc-entrada { background: #e2f6f4; color: #0f9d8f; } .btn-acao { padding: 5px 10px; line-height: 1; font-size: 12px; font-weight: 600; border-radius: 7px; display: inline-flex; align-items: center; gap: 4px; } .btn-acao i { font-size: 13px; } /* ============================================================ Padrão global de botões e formulários (portal) Escopado em .portal-body p/ sobrepor o Bootstrap sem vazar. ============================================================ */ .portal-body .btn { border-radius: 8px; font-weight: 600; letter-spacing: .1px; transition: background .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease, transform .1s ease; } .portal-body .btn:active { transform: translateY(1px); } .portal-body .btn-sm { border-radius: 7px; } .portal-body .btn-lg { border-radius: 10px; } /* Primário = azul do ERP */ .portal-body .btn-primary { background: var(--portal-accent); border-color: var(--portal-accent-dark); color: #fff; } .portal-body .btn-primary:hover, .portal-body .btn-primary:focus { background: var(--portal-accent-dark); border-color: var(--portal-accent-dark); color: #fff; box-shadow: 0 3px 9px rgba(80,111,228,.35); } .portal-body .btn-outline-primary { color: var(--portal-accent); border-color: var(--portal-accent); background: #fff; } .portal-body .btn-outline-primary:hover { background: var(--portal-accent); border-color: var(--portal-accent); color: #fff; } /* Secundários neutros coerentes */ .portal-body .btn-secondary { background: #eef1f7; border-color: #e0e5ef; color: #41506a; } .portal-body .btn-secondary:hover { background: #e2e7f1; border-color: #d2d9e6; color: #263243; } .portal-body .btn-outline-secondary { color: #5a6b85; border-color: #ccd3e0; background: #fff; } .portal-body .btn-outline-secondary:hover { background: #eef1f7; border-color: #b8c2d4; color: #263243; } /* Inputs / selects com texto legível */ .portal-body .form-control { color: #263243; border-radius: 8px; } .portal-body .form-control-sm { border-radius: 7px; } .portal-body .form-control::placeholder { color: #9aa5b5; opacity: 1; } .portal-body select.form-control { color: #263243; } .portal-body .form-control:focus { border-color: #a9bcf5; box-shadow: 0 0 0 .18rem rgba(80,111,228,.15); } /* Texto secundário do Bootstrap mais legível (override do #6c757d) */ .portal-body .text-muted { color: var(--portal-muted) !important; } /* Botão "Baixar XML" com hierarquia (destaque sobre os demais) */ .btn-xml { background: var(--portal-accent); border: 1px solid var(--portal-accent-dark); color: #fff; box-shadow: 0 2px 6px rgba(80,111,228,.45); font-weight: 600; } .btn-xml:hover { background: var(--portal-accent-dark); color: #fff; box-shadow: 0 3px 9px rgba(80,111,228,.55); } .btn-danfe { background: #fff; border: 1px solid var(--portal-border); color: #5a6b85; } .btn-danfe:hover { background: #f5f7fc; color: var(--portal-accent); border-color: #d7deea; } /* ---------- Visualizador de XML formatado (modal) ---------- */ .viewer-xml { height: 76vh; overflow: auto; background: #fbfcfe; } .viewer-xml .xml-toolbar { position: sticky; top: 0; z-index: 2; display: flex; justify-content: flex-end; gap: 8px; padding: 8px 12px; background: #fbfcfe; border-bottom: 1px solid var(--portal-border); } .viewer-xml pre.xml-pretty { margin: 0; padding: 14px 18px; font-family: 'Consolas','SFMono-Regular',Menlo,Monaco,'Courier New',monospace; font-size: 12.5px; line-height: 1.55; color: #2b3444; white-space: pre; tab-size: 2; } .viewer-xml pre.xml-pretty code { font-family: inherit; background: none; padding: 0; color: inherit; } .viewer-xml .xt-tag { color: #2b64d9; font-weight: 600; } .viewer-xml .xt-attr { color: #b8860b; } .viewer-xml .xt-val { color: #1e7e34; } .viewer-xml .xt-punct { color: #98a3b6; } .viewer-xml .xt-comment { color: #9aa5b5; font-style: italic; } .viewer-xml .xml-loading, .viewer-xml .xml-error { padding: 40px 20px; text-align: center; color: var(--portal-muted); font-size: 14px; } .viewer-xml .xml-loading i, .viewer-xml .xml-error i { display: block; font-size: 30px; margin-bottom: 10px; opacity: .5; } .viewer-xml .xml-loading i { animation: portalSpin 1s linear infinite; } @keyframes portalSpin { to { transform: rotate(360deg); } } /* ---------- Pulso de ondas (quando há algo a analisar) ---------- */ .pulse-attention { position: relative; } .pulse-attention::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; animation: portalPulse 2.2s cubic-bezier(.66,0,0,1) infinite; } .pulse-red::after { box-shadow: 0 0 0 0 rgba(231,74,59,.5); } .pulse-amber::after { box-shadow: 0 0 0 0 rgba(246,161,62,.5); } @keyframes portalPulse { to { box-shadow: 0 0 0 12px rgba(0,0,0,0); } } /* ---------- Empty state ---------- */ .portal-empty { text-align: center; padding: 46px 20px; color: var(--portal-muted); } .portal-empty i { font-size: 44px; opacity: .4; display: block; margin-bottom: 10px; } /* ---------- Loading overlay ---------- */ .portal-loading { position: fixed; inset: 0; background: rgba(255,255,255,.6); z-index: 2000; display: none; align-items: center; justify-content: center; } .portal-loading.show { display: flex; } .portal-loading .spinner-border { color: var(--portal-accent); } /* ---------- Responsivo ---------- */ @media (max-width: 991px) { .portal-sidebar { transform: translateX(-100%); } .portal-sidebar.open { transform: translateX(0); } .portal-main { margin-left: 0; } .portal-topbar .topbar-toggle { display: block; } .portal-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 1039; } .portal-backdrop.show { display: block; } } /* ---------- Olhinho de mostrar/ocultar senha ---------- */ .pwd-wrap { position: relative; } .pwd-wrap input { padding-right: 34px; } .pwd-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--portal-muted); cursor: pointer; padding: 4px 6px; line-height: 1; } .pwd-toggle:hover { color: var(--portal-text); } .pwd-toggle:focus { outline: none; }