/* * CSS de COMPONENTE do int-pied. A identidade (header, botões, tabelas, cards, paleta da * marca) é do kit da casa — `custom-theme.css`, template rastreado que NÃO se edita por app * (engenharia/java-micronaut §UI). Aqui fica só o que é deste app e o kit não cobre: * chips de estado, célula JSON, badges de status, stepper, painel do colaborador. * * Linkado no pelo fragment `componentes :: appCss` — o head(title) do kit linka só o * bootstrap e o custom-theme.css, e não tem slot para o app somar o seu (ver componentes.html). * * As regras abaixo escopadas em `.xadm-header` SOMAM ao header do kit (chips do app dentro do * slot do menu); não redefinem a identidade dele. */ /* ── Chips de estado no header (badge MODO + versão) ─────────────────────── */ .xadm-header .nav-link.dropdown-toggle::after { margin-left: .3rem; } .xadm-header .badge-modo { font-size: .72rem; padding: .25rem .55rem; border-radius: 999px; background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .92); } .xadm-header .badge-modo.STAGING { background: #b8860b; color: #fff; } .xadm-header .badge-modo.PRODUCAO { background: #1e6e3c; color: #fff; } .xadm-header .versao { color: rgba(255, 255, 255, .55); font-size: .78rem; } /* ── Payload cru (detalhe) ───────────────────────────────────────────────── */ pre.json { background: #0d1117; color: #e6edf3; padding: 1rem; border-radius: .4rem; overflow-x: auto; font-size: .82rem; line-height: 1.45; } /* ── Célula JSON clicável (molde request/list.html) ──────────────────────── */ .cell-truncate { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .json-cell-click { cursor: pointer; user-select: none; } .json-cell-click:hover { background-color: rgba(13, 110, 253, .08); } .json-cell-click:active { background-color: rgba(13, 110, 253, .15); } /* ── Badges de status (preservam as cores das telas atuais) ──────────────── */ .tipo { font-size: .72rem; padding: .1rem .45rem; border-radius: .25rem; text-transform: uppercase; } .tipo.webhook { background: #e6e0fb; } .tipo.rest { background: #dce9fb; } .status { font-size: .75rem; padding: .1rem .45rem; border-radius: .25rem; background: #eee; } .status.NA_FILA { background: #fff2cc; } .status.ENVIANDO { background: #e6e0fb; } .status.ENVIADO { background: #dce9fb; } .status.CONFIRMADO { background: #d6f5d6; } .status.ERRO, .status.ERRO_XADM { background: #fde4e4; } .status.CAPTURADO { background: #eee; } /* de-para (console-detalhe) */ tr.PREENCHIDO { background: #e7f6e7; } tr.BRANCO { background: #fff7e0; } tr.FALTANDO { background: #fde4e4; } .tag { font-size: .72rem; padding: .05rem .35rem; border-radius: .25rem; border: 1px solid #ccc; } /* stepper (console-detalhe) */ .stepper { display: flex; gap: .4rem; margin: 1rem 0; flex-wrap: wrap; } .passo { padding: .3rem .7rem; border-radius: .3rem; font-size: .82rem; border: 1px solid #ddd; } .passo.feito { background: #d6f5d6; } .passo.atual { background: #dce9fb; font-weight: 600; } .passo.erro { background: #fde4e4; font-weight: 600; } .passo.pendente { color: #999; } /* avisos / vazios */ .aviso { color: #a15c00; font-size: .85rem; background: #fff7e0; padding: .5rem .8rem; border-radius: .3rem; margin: .6rem 0; } /* Erro terminal (dado do pedido): vermelho, reaproveita a paleta do bucket buk-erro. */ .aviso-erro { color: #b42318; background: #fde4e4; } .vazio { color: #999; } ul.fonte { columns: 2; font-size: .82rem; } /* ══ Painel colaborador (/, /pedidos) — chrome limpo, marca XADM ═══════════════ */ .painel-body { background: #f5f6f8; min-height: 100vh; } .painel-title { font-weight: 600; letter-spacing: -.01em; } /* Paleta dos 4 buckets (uma cor por status amigável). */ .buk-aberto { --buk: #6b7280; --buk-bg: #eef0f3; } .buk-enviando { --buk: #1d4ed8; --buk-bg: #e5edff; } .buk-importado { --buk: #1e6e3c; --buk-bg: #dcf5e4; } .buk-erro { --buk: #b42318; --buk-bg: #fde4e4; } .buk-alerta { --buk: #a15c00; --buk-bg: #fff7e0; } /* aviso âmbar: parcial travado (spec 007) */ /* Badge de status na lista/detalhe. */ .bucket-badge { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 600; padding: .2rem .6rem; border-radius: 999px; color: var(--buk); background: var(--buk-bg); } .bucket-badge::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--buk); } /* Tiles de resumo (topo do dashboard) — clicáveis (filtram). */ .tile { display: block; text-decoration: none; color: inherit; background: #fff; border: 1px solid #e6e8ec; border-radius: .6rem; padding: 1rem 1.1rem; transition: border-color .15s, box-shadow .15s, transform .05s; } .tile:hover { border-color: var(--buk); box-shadow: 0 2px 10px rgba(0,0,0,.05); } .tile.ativo { border-color: var(--buk); box-shadow: 0 0 0 2px var(--buk-bg); } .tile .tile-n { font-size: 1.9rem; font-weight: 700; color: var(--buk); line-height: 1; } .tile .tile-label { font-size: .8rem; color: #667085; margin-top: .3rem; } /* Lista de pedidos — linha clicável. */ .pedido-row { cursor: pointer; } .pedido-row:hover { background: #eef2ff; } /* Timeline do detalhe (4 buckets, horizontal). */ .timeline { display: flex; gap: .5rem; margin: 1.2rem 0; flex-wrap: wrap; } .timeline .etapa { flex: 1 1 8rem; padding: .55rem .8rem; border-radius: .5rem; background: #eef0f3; color: #98a2b3; font-size: .85rem; text-align: center; border: 1px solid #e6e8ec; } .timeline .etapa.feito { background: #dcf5e4; color: #1e6e3c; border-color: #bfe6cc; } .timeline .etapa.atual { background: var(--buk-bg); color: var(--buk); border-color: var(--buk); font-weight: 600; } .timeline .etapa.falhou { background: #fde4e4; color: #b42318; border-color: #f3b4b0; font-weight: 600; }