/* ===== Simulador do Cefas Hub — cores, medidas e tipografia copiadas do ERP real ===== */
.pl-sim-root { font-family: "Inter Variable", Inter, "Segoe UI", system-ui, sans-serif; }
.sim, .sim-login, .sim-abertura {
  --s-primary: hsl(223 100% 59%); --s-roxo: hsl(262 83% 58%); --s-eletrico: hsl(194 100% 50%);
  --s-bg: hsl(213 36% 95%); --s-card: #fff; --s-borda: hsl(215 32% 93%); --s-txt: hsl(222 47% 11%); --s-txt2: hsl(215 16% 47%);
  --s-muted: hsl(215 32% 95%); --s-accent: hsl(223 100% 96%); --s-side: hsl(223 64% 19%); --s-side-txt: rgba(219, 228, 255, .85); --s-side-muted: rgba(176, 188, 221, .7);
  --s-verde: rgb(22, 162, 73); --s-raio: .875rem;
}
.sim { position: relative; height: 100%; display: grid; grid-template-columns: 250px minmax(0, 1fr); background: var(--s-bg); color: var(--s-txt); font-size: 14px; overflow: hidden; transition: grid-template-columns .2s; }
.sim button { cursor: pointer; border: 0; background: none; text-align: left; font: inherit; color: inherit; }
.sim .ic, .sim-login .ic { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sim .ic.mini { width: 12px; height: 12px; vertical-align: -2px; opacity: .6; }

/* logo (símbolo da Concretize num quadrado em degradê, como no Hub) */
.sim-marca-ic { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 11px; background: linear-gradient(135deg, var(--s-primary), var(--s-roxo)); box-shadow: 0 6px 16px -6px hsl(223 100% 59% / .8); }
.sim-marca-ic i { width: 20px; height: 20px; background: #fff; -webkit-mask: url(/img/concretize.svg) center / contain no-repeat; mask: url(/img/concretize.svg) center / contain no-repeat; }
.sim-marca-ic.cinza { background: none; box-shadow: none; width: 44px; height: 44px; }
.sim-marca-ic.cinza i { width: 44px; height: 44px; background: #7c8aa5; }

/* menu lateral */
.sim-side { background: var(--s-side); color: var(--s-side-txt); display: flex; flex-direction: column; min-height: 0; z-index: 20; padding: 14px 10px 0; }
.sim-logo { display: flex; align-items: center; gap: 10px; padding: 0 4px; margin-bottom: 12px; }
.sim-logo-txt { font-size: 18px; font-weight: 800; color: #fff; white-space: nowrap; }
.sim-logo-txt i { font-style: normal; color: var(--s-eletrico); }
.sim-side-scroll { overflow-y: auto; min-height: 0; padding-bottom: 1rem; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent; }
.sim-grupo { width: calc(100% - 16px); margin: 12px 8px 3px; display: flex !important; justify-content: space-between; align-items: center; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .11em; color: var(--s-side-muted) !important; white-space: nowrap; }
.sim-grupo:hover { color: hsl(225 40% 78%) !important; }
.sim-grupo .ic { width: 12px; height: 12px; transition: transform .2s; }
.sim-grupo.fechado .ic { transform: rotate(-90deg); }
.sim-nav { width: 100%; min-height: 46px; display: flex !important; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; color: var(--s-side-txt) !important; font-weight: 600; font-size: 13.5px; line-height: 1.5; margin-bottom: 3px; }
.sim-nav:hover { background: rgba(255, 255, 255, .06); color: #fff !important; }
.sim-nav.on { background: linear-gradient(90deg, rgb(46, 105, 255), rgb(66, 139, 255)); color: #fff !important; box-shadow: 0 10px 22px -10px rgba(46, 105, 255, .9); }
/* quadradinho em volta do ícone, igual ao Hub */
.sim-nav-ic { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 9px; background: rgba(255, 255, 255, .06); color: rgb(176, 188, 221); transition: color .15s, background .15s; }
.sim-nav:hover .sim-nav-ic { color: #fff; }
.sim-nav.on .sim-nav-ic { background: rgba(255, 255, 255, .2); color: #fff; }
.sim-nav-t { flex: 1; line-height: 1.2; }
.sim-nav-n { font-size: 11px; color: rgba(219, 228, 255, .55); font-weight: 600; }
.sim-nav.on .sim-nav-n { color: #dbeafe; }
.sim-badge { font-size: 9.5px; font-weight: 800; padding: 2px 6px; border-radius: 99px; background: var(--s-verde); color: #fff; }
.sim-badge.classico { background: rgba(255, 255, 255, .14); color: #dbe4ff; }
.sim-nav-lock { width: 13px !important; height: 13px !important; opacity: .7; }
.sim-fundo { display: none; }

/* menu recolhido (só ícones) */
.sim.mini { grid-template-columns: 76px minmax(0, 1fr); }
.sim.mini .sim-logo-txt, .sim.mini .sim-nav-t, .sim.mini .sim-nav-n, .sim.mini .sim-badge, .sim.mini .sim-nav-lock, .sim.mini .sim-grupo { display: none !important; }
.sim.mini .sim-grupo-itens { display: block !important; }
.sim.mini .sim-nav { justify-content: center; padding: 8px 0; }
.sim.mini .sim-logo { justify-content: center; padding: 0; }
.sim.mini .sim-grupo-itens + .sim-grupo-itens { border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 6px; margin-top: 6px; }

/* área principal */
.sim-main { min-width: 0; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.sim-header { padding: 18px 22px 10px; display: grid; gap: 14px; position: relative; z-index: 6; }
.sim-header-top { display: flex; align-items: center; gap: 14px; }
.sim-bemvindo { display: grid; min-width: 0; flex: 1; gap: 2px; }
.sim-bemvindo b { font-size: 20px; font-weight: 700; color: var(--s-txt); line-height: 1.2; }
.sim-bemvindo small { color: var(--s-txt2); font-size: 13px; }
.sim-header-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.sim-icon-btn { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--s-borda) !important; display: grid !important; place-items: center; color: hsl(215 25% 27%) !important; background: var(--s-card) !important; font-size: 15px; }
.sim-icon-btn:hover, .sim-icon-btn.ativo { border-color: hsl(223 100% 80%) !important; color: var(--s-primary) !important; background: var(--s-accent) !important; }
.sim-pill { position: relative; display: inline-flex !important; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--s-borda) !important; background: var(--s-card) !important; border-radius: 9999px; font-size: 12px; font-weight: 600; color: hsl(215 25% 27%) !important; white-space: nowrap; }
.sim-pill .ic { width: 14px; height: 14px; }
.sim-pill.ativo { border-color: hsl(223 100% 80%) !important; color: var(--s-primary) !important; }
.sim-licenca { color: rgb(101, 117, 139) !important; font-weight: 500; }
.sim-ponto { position: absolute; top: -1px; right: 2px; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; border: 2px solid var(--s-card); }
.sim-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--s-primary); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.sim-pop-wrap { position: relative; display: flex; }
.sim-header-acoes { position: relative; }
.sim-pop { position: absolute !important; right: 0; top: calc(100% + 8px); width: 300px; background: var(--s-card); border: 1px solid var(--s-borda); border-radius: 14px; box-shadow: 0 16px 40px -12px rgba(15, 23, 42, .35); padding: 14px; z-index: 30; display: grid; gap: 6px; animation: simPop .15s; }
@keyframes simPop { from { opacity: 0; transform: translateY(-4px); } }
.sim-pop > b { font-size: 14px; }
.sim-pop-sec { font-size: 10px; font-weight: 700; letter-spacing: .08em; color: var(--s-txt2); text-transform: uppercase; }
.sim-pop p { margin: 4px 0 0; color: var(--s-txt2); font-size: 13px; }
.sim-pop-ajuda { width: 320px; gap: 4px; }
.sim-ajuda-item { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 10px; }
.sim-ajuda-item:hover { background: var(--s-muted); }
.sim-ajuda-item > span { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--s-accent); color: var(--s-primary); }
.sim-ajuda-item b { display: block; font-size: 13px; } .sim-ajuda-item small { color: var(--s-txt2); font-size: 12px; }
/* balão de Novidades */
.sim-pop.sim-pop-nov { right: 0; left: auto; width: 400px; max-width: calc(100vw - 16px); padding: 0; gap: 0; overflow: hidden; border-radius: 16px; display: flex; flex-direction: column; max-height: min(700px, 70vh); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25); }
.sim-nov-topo { position: relative; padding: 14px 20px 16px; color: #fff; background: linear-gradient(120deg, rgb(46, 105, 255), rgb(0, 195, 255)); }
.sim-nov-topo small { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; opacity: .9; }
.sim-nov-topo small .ic { width: 13px; height: 13px; }
.sim-nov-topo h3 { margin: 6px 0 2px; display: flex; align-items: center; gap: 8px; font-size: 19px; font-weight: 800; color: #fff; }
.sim-nov-topo h3 .ic { width: 20px; height: 20px; }
.sim-nov-topo p { margin: 0; font-size: 13px; color: rgba(255, 255, 255, .9); }
.sim-nov-x { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 8px; display: grid !important; place-items: center; color: #fff !important; }
.sim-nov-x:hover { background: rgba(255, 255, 255, .18) !important; }
.sim-nov-corpo { overflow-y: auto; padding: 4px 20px; min-height: 0; flex: 1; }
.sim-nov-corpo article { padding: 16px 0; border-bottom: 1px solid var(--s-borda); }
.sim-nov-corpo article:last-child { border-bottom: 0; }
.sim-nov-meta { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--s-txt2); }
.sim-nov-ver { background: var(--s-accent); color: var(--s-primary); font-weight: 700; border-radius: 99px; padding: 2px 9px; font-size: 12px; }
.sim-nov-corpo b { display: block; margin: 8px 0 6px; font-size: 13.5px; }
.sim-nov-corpo ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.sim-nov-corpo li { position: relative; padding-left: 14px; font-size: 13.5px; line-height: 1.5; color: var(--s-txt); }
.sim-nov-corpo li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--s-primary); }
.sim-nov-rodape { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--s-borda); font-size: 13px; color: var(--s-txt2); }
.sim-nov-rodape b { color: var(--s-txt); }
.sim-gaveta-fundo { position: absolute; inset: 0; background: rgba(15, 23, 42, .35); z-index: 34; }
.sim-gaveta { position: absolute !important; top: 0; right: 0; bottom: 0; width: min(440px, 92%); background: var(--s-card); z-index: 35; box-shadow: -20px 0 50px rgba(0, 0, 0, .2); display: flex; flex-direction: column; animation: simGaveta .25s; }
@keyframes simGaveta { from { transform: translateX(30px); opacity: 0; } }
.sim-gaveta-topo { display: flex; justify-content: space-between; gap: 1rem; padding: 18px 20px; border-bottom: 1px solid var(--s-borda); }
.sim-gaveta-topo small { font-size: 10px; font-weight: 700; letter-spacing: .1em; color: var(--s-primary); }
.sim-gaveta-topo h3 { margin: 2px 0; font-size: 18px; } .sim-gaveta-topo p { margin: 0; color: var(--s-txt2); font-size: 13px; }
.sim-gaveta-corpo { overflow-y: auto; padding: 8px 20px 20px; }
.sim-gaveta article { padding: 14px 0; border-bottom: 1px solid var(--s-borda); }
.sim-gaveta article small { color: var(--s-primary); font-weight: 700; font-size: 11px; }
.sim-gaveta article b { display: block; margin: 4px 0; } .sim-gaveta article p { margin: 0; color: var(--s-txt2); font-size: 13px; line-height: 1.5; }

/* busca de rotina */
.sim-rotina { display: flex; align-items: center; gap: 10px; height: 46px; border: 1px solid var(--s-primary); border-radius: 12px; padding: 0 14px; background: var(--s-card); box-shadow: 0 1px 2px rgba(0, 0, 0, .05); color: hsl(215 25% 27%); }
.sim-rotina:focus-within { box-shadow: 0 0 0 3px hsl(223 100% 59% / .18); }
.sim-rotina input { flex: 1; min-width: 120px; border: 0; outline: 0; background: transparent; font-weight: 600; font-size: 14px; color: var(--s-txt); }
.sim-rotina input::placeholder { color: hsl(215 25% 27%); font-weight: 600; }
.sim-rotina-ex { display: none; color: var(--s-txt2); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sim-rotina.vazio .sim-rotina-ex { display: block; }
.sim-rotina-mic { color: var(--s-primary); display: grid; }
.sim-rotina kbd { font-size: 11px; color: var(--s-primary); background: var(--s-accent); border-radius: 6px; padding: 2px 7px; font-family: ui-monospace, Consolas, monospace; }
.sim-content { padding: 6px 22px 2rem; display: grid; gap: 14px; align-content: start; }

/* aviso de atualização obrigatória (igual ao Hub) */
.sim-atualizacao { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 16px 20px; border-radius: .5rem; border: 1px solid rgba(245, 159, 10, .4); background: rgba(245, 159, 10, .1); }
.sim-atu-ic { width: 40px; height: 40px; flex: none; border-radius: 11px; display: grid; place-items: center; background: rgba(245, 159, 10, .2); color: rgb(245, 159, 10); }
.sim-atu-ic .ic { width: 20px; height: 20px; }
.sim-atu-txt { flex: 1; min-width: 16rem; }
.sim-atu-txt b { font-size: 15px; color: var(--s-txt); } .sim-atu-txt b i { font-style: normal; color: rgb(245, 159, 10); }
.sim-atu-txt p { margin: 2px 0 0; font-size: 13px; color: var(--s-txt2); } .sim-atu-txt p b { font-size: 13px; }
.sim-atu-txt p.sim-atu-ok { color: var(--s-verde); display: flex; align-items: center; gap: 6px; }
.sim-atu-txt p.sim-atu-ok .ic { width: 14px; height: 14px; }
.sim-atu-btn { padding: 10px 18px; font-weight: 700; }

/* início */
.sim-banner { position: relative; background: linear-gradient(100deg, #5b3df5, #4f6bff 45%, #39a0ff); color: #fff; border-radius: 16px; padding: 18px 20px; display: grid; gap: 6px; padding-right: 180px; }
.sim-banner b { font-size: 17px; } .sim-banner span { font-size: 13px; opacity: .95; }
.sim-banner-btn { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); background: #fff; color: hsl(222 47% 11%); border-radius: 10px; padding: 8px 12px; font-weight: 700; display: flex !important; align-items: center; gap: 6px; opacity: 1 !important; }
.sim-banner-btn .ic { width: 14px; height: 14px; }
.sim-cards2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sim-cards4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sim-card { background: var(--s-card); border: 1px solid var(--s-borda); border-radius: var(--s-raio); padding: 14px 16px; display: flex; gap: 10px; align-items: flex-start; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
.sim-card > div:not(.sim-barras):not(.sim-grafico-topo) { display: grid; gap: 2px; flex: 1; }
.sim-card small { color: var(--s-txt2); font-size: 11px; font-weight: 600; } .sim-card b { font-size: 22px; }
.sim-kpi-home small:first-child { letter-spacing: .03em; }
.sim-emoji { width: 34px; height: 34px; border-radius: 9px; background: var(--s-accent); display: grid; place-items: center; font-size: 16px; }
.sim-grafico { display: grid !important; }
.sim-grafico-topo { display: flex; justify-content: space-between; align-items: center; }
.sim-grafico-topo b { font-size: 15px; }
.sim-barras { display: flex; align-items: flex-end; gap: .8rem; height: 150px; padding: .5rem 0 1.4rem; }
.sim-barras span { flex: 1; background: linear-gradient(180deg, #3b82f6, #93c5fd); border-radius: 8px 8px 0 0; position: relative; min-height: 4px; }
.sim-barras span i { position: absolute; bottom: -1.3rem; left: 0; right: 0; text-align: center; font-size: .72rem; color: var(--s-txt2); font-style: normal; }
.sim-barras.v { height: 90px; gap: .35rem; padding-bottom: 0; } .sim-barras.v span { background: var(--s-roxo); }
.laranja { color: #ea9a0c !important; } .vermelho { color: hsl(358 75% 59%) !important; }

/* tela de clientes */
.sim-titulo h2 { margin: 0; display: flex; align-items: center; gap: .5rem; font-size: 24px; font-weight: 700; } .sim-titulo h2 .ic { width: 24px; height: 24px; }
.sim-titulo small { color: var(--s-txt2); font-size: 12.5px; }
.sim-acoes { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.sim-btn { display: inline-flex !important; align-items: center; gap: 7px; border: 1px solid var(--s-borda) !important; background: var(--s-card) !important; border-radius: 10px; padding: 8px 14px; font-weight: 600; font-size: 13.5px; color: var(--s-txt) !important; white-space: nowrap; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
.sim-btn:hover { background: var(--s-muted) !important; }
.sim-btn .ic { width: 15px; height: 15px; }
.sim-btn-azul { background: var(--s-primary) !important; border-color: var(--s-primary) !important; color: #fff !important; }
.sim-btn-azul:hover { background: hsl(223 100% 52%) !important; }
.sim-btn-azul.desab { opacity: .45; }
.sim-btn.ativo { border-color: var(--s-primary) !important; color: var(--s-primary) !important; }
.sim-btn-quad { padding: 8px 10px; }
.sim-flash { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; border-radius: 10px; padding: .6rem .9rem; font-weight: 600; animation: simFlash .6s; }
@keyframes simFlash { from { transform: translateY(-6px); opacity: 0; } }
.sim-buscabar { display: flex; gap: 8px; }
.sim-busca { flex: 1; display: flex; align-items: center; gap: .5rem; border: 1px solid var(--s-borda); background: var(--s-card); border-radius: 12px; padding: 0 .9rem; color: var(--s-txt2); }
.sim-busca input { border: 0; outline: 0; flex: 1; padding: .7rem 0; background: transparent; min-width: 0; color: var(--s-txt); font: inherit; }
.sim-filtros { background: var(--s-card); border: 1px solid var(--s-borda); border-radius: var(--s-raio); padding: 1rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; animation: simFlash .3s; }
.sim-filtros-rodape { grid-column: 1 / -1; display: flex; gap: 1rem; align-items: center; }
.sim-filtros-rodape .sim-link { margin-left: auto; color: var(--s-txt2); font-weight: 600; }
.sim-check { font-weight: 600; }
.sim-kpis .sim-card > .ic { width: 18px; height: 18px; color: var(--s-txt2); margin-top: 2px; }
.sim-tabela-wrap { background: var(--s-card); border: 1px solid var(--s-borda); border-radius: var(--s-raio); overflow-x: auto; }
.sim-tabela { width: 100%; border-collapse: collapse; }
.sim-tabela th { text-align: left; font-size: 11px; letter-spacing: .05em; color: var(--s-txt2); padding: .75rem .8rem; white-space: nowrap; border-bottom: 1px solid var(--s-borda); }
.sim-tabela td { padding: .65rem .8rem; border-bottom: 1px solid var(--s-muted); vertical-align: middle; }
.sim-tabela td small { color: var(--s-txt2); }
.sim-tabela .cod { color: var(--s-txt2); font-size: .85rem; }
.sim-tabela .mono { font-family: ui-monospace, Consolas, monospace; font-size: .82rem; white-space: nowrap; }
.sim-tabela tr.novo td { background: var(--s-accent); }
.sim-tabela .vazio { text-align: center; color: var(--s-txt2); padding: 2rem; }
.sim-seg { display: inline-block; background: var(--s-muted); border-radius: 6px; padding: .2em .5em; font-size: .74rem; font-weight: 700; white-space: nowrap; }
.sim-linha-acoes { white-space: nowrap; }
.sim-linha-acoes button { width: 30px; height: 30px; border-radius: 8px; display: inline-grid !important; place-items: center; color: hsl(215 25% 35%) !important; }
.sim-linha-acoes button:hover { background: var(--s-muted); color: var(--s-primary) !important; }
.d { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
/* cores da situação do cliente, iguais ao Hub (Ativo = escuro, Compra recente = verde…) */
.d.ativo { background: var(--s-txt); } .d.recente { background: #22c55e; } .d.leve { background: hsl(38 92% 50%); } .d.inativo { background: hsl(358 75% 59%); } .d.prospect { background: var(--s-roxo); }
.sim-legenda { display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: center; color: var(--s-txt2); font-size: .8rem; }
.sim-legenda .d { margin-right: -.6rem; }

/* modais */
.sim-overlay { position: absolute; inset: 0; z-index: 30; background: rgba(15, 23, 42, .45); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); place-items: center; padding: 1rem; }
.sim-modal { background: var(--s-card); border-radius: 18px; width: min(760px, 100%); min-width: 0; max-height: 100%; min-height: 0; display: flex; flex-direction: column; box-shadow: 0 24px 60px rgba(0, 0, 0, .25); animation: simModal .25s; }
.sim-modal-v360 { width: min(860px, 100%); }
@keyframes simModal { from { transform: translateY(12px) scale(.98); opacity: 0; } }
.sim-modal-topo { display: flex; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.3rem .6rem; }
.sim-modal-topo h3 { margin: 0; font-size: 1.2rem; display: flex; align-items: center; gap: .4rem; }
.sim-modal-topo b { display: inline-block; margin-top: .3rem; } .sim-modal-topo small { display: block; color: var(--s-txt2); margin-top: .2rem; }
.sim-x { width: 34px; height: 34px; border-radius: 50%; display: grid !important; place-items: center; color: var(--s-txt2) !important; flex: none; }
.sim-x:hover { background: var(--s-muted) !important; }
.sim-abas { display: flex; gap: .2rem; padding: 0 1.1rem; border-bottom: 1px solid var(--s-borda); overflow-x: auto; }
.sim-aba { display: flex !important; align-items: center; gap: .35rem; padding: .7rem .8rem; font-weight: 600; color: var(--s-txt2) !important; border-bottom: 2px solid transparent !important; white-space: nowrap; }
.sim-aba .ic { width: 15px; height: 15px; }
.sim-aba.on { color: var(--s-primary) !important; border-bottom-color: var(--s-primary) !important; }
.sim-modal-body { padding: 1.1rem 1.3rem; overflow-y: auto; min-height: 0; display: grid; gap: 1rem; align-content: start; }
.sim-modal-body h4 { margin: 0; display: flex; align-items: center; gap: .4rem; font-size: .95rem; }
.sim-modal-body h4.sep { padding-top: .5rem; border-top: 1px solid var(--s-borda); }
.sim-modal-rodape { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1.3rem; border-top: 1px solid var(--s-borda); flex-wrap: wrap; }
.sim-modal-rodape > div { display: flex; gap: .5rem; margin-left: auto; }
.sim-pendentes { color: #b45309; font-size: .82rem; }
.sim-radios { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; }
.sim-radio { display: inline-flex !important; align-items: center; gap: .45rem; font-weight: 600; padding: .25rem .1rem; }
.sim-radio i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #94a3b8; display: grid; place-items: center; }
.sim-radio.on i { border-color: var(--s-primary); } .sim-radio.on i::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--s-primary); }
.sim-nao-edit { color: var(--s-txt2); margin-left: auto; }
.sim-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .85rem; }
.sim-campo { grid-column: span 3; display: grid; gap: .3rem; position: relative; align-content: start; }
.sim-campo.largo { grid-column: 1 / -1; } .sim-campo.terco { grid-column: span 2; } .sim-campo.doisTercos { grid-column: span 4; }
.sim-campo > span { font-size: .8rem; font-weight: 600; }
.sim-campo > span small { color: var(--s-txt2); font-weight: 500; }
.sim-campo-linha { display: flex; gap: .4rem; }
.sim-campo input, .sim-campo textarea { width: 100%; border: 1px solid hsl(215 25% 85%); border-radius: 10px; padding: .58rem .7rem; background: var(--s-card); color: var(--s-txt); font: inherit; font-size: .92rem; min-width: 0; }
.sim-campo input:focus, .sim-campo textarea:focus { outline: 2px solid hsl(223 100% 59% / .25); border-color: var(--s-primary); }
.sim-campo input[readonly] { background: var(--s-muted); }
.sim-campo textarea { resize: vertical; }
.sim-select { display: flex !important; justify-content: space-between; align-items: center; border: 1px solid hsl(215 25% 85%) !important; border-radius: 10px; padding: .58rem .7rem; background: var(--s-card) !important; font-size: .92rem; width: 100%; }
.sim-select.aberto { border-color: var(--s-primary) !important; outline: 2px solid hsl(223 100% 59% / .25); }
.sim-opcoes { position: absolute; left: 0; right: 0; top: 100%; margin-top: 4px; background: var(--s-card); border: 1px solid var(--s-borda); border-radius: 12px; box-shadow: 0 12px 30px rgba(15, 23, 42, .18); z-index: 10; padding: .3rem; max-height: 220px; overflow-y: auto; }
.sim-opcoes button { display: block; width: 100%; padding: .55rem .7rem; border-radius: 8px; font-weight: 500; }
.sim-opcoes button:hover { background: var(--s-accent) !important; }
.sim-aviso { display: flex; gap: .7rem; align-items: flex-start; background: var(--s-accent); border: 1px solid hsl(223 100% 88%); border-radius: 12px; padding: .8rem .9rem; font-size: 13px; }
.sim-aviso small { display: block; color: var(--s-txt2); margin-top: .15rem; }
.sim-aviso.amarelo { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.sim-check.on { color: var(--s-primary); font-size: 1.1rem; }
.sim-erro { color: #dc2626; font-size: .82rem; }
.sim-ajuda { grid-column: 1 / -1; color: var(--s-txt2); font-size: .78rem; margin-top: -.5rem; }
.sim-chips { display: flex; gap: .4rem; flex-wrap: wrap; }
.sim-chip { border: 1px solid hsl(215 25% 85%) !important; border-radius: 99px; padding: .4em .9em; font-weight: 600; font-size: .86rem; background: var(--s-card) !important; }
.sim-chip.on { background: var(--s-accent) !important; border-color: var(--s-primary) !important; color: var(--s-primary) !important; }
.sim-chip.mini { font-size: .7rem; padding: .1em .5em; }
/* atendimentos (igual ao Hub) */
.sim-modal-atend { width: min(672px, 100%); }
.sim-at-form { border: 1px solid var(--s-borda); border-radius: 6px; background: color-mix(in srgb, var(--s-muted) 30%, transparent); padding: 12px; display: grid; gap: 12px; }
.sim-at-titulo { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.sim-at-titulo .ic { width: 16px; height: 16px; }
.sim-at-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sim-at-campo { display: grid; gap: 6px; }
.sim-at-campo > span { font-size: 12px; font-weight: 500; color: var(--s-txt2); }
.sim-at-campo select, .sim-at-campo input, .sim-at-campo textarea { width: 100%; min-width: 0; height: 36px; border: 1px solid hsl(215 25% 85%); border-radius: 6px; background: var(--s-card); color: var(--s-txt); padding: 0 10px; font: inherit; font-size: 14px; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
.sim-at-campo textarea { height: auto; padding: 8px 12px; resize: vertical; }
.sim-at-campo :is(select, input, textarea):focus { outline: 2px solid hsl(223 100% 59% / .35); outline-offset: 1px; }
.sim-at-campo input:disabled { opacity: .5; cursor: not-allowed; }
.sim-at-linha { display: flex; gap: 8px; } .sim-at-linha input[type=time] { width: 112px; flex: none; }
.sim-at-erro { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 12px; color: hsl(358 75% 50%); }
.sim-at-erro .ic { width: 14px; height: 14px; }
.sim-at-registrar { display: flex; align-items: center; gap: 8px; }
.sim-at-ok { display: flex; align-items: center; gap: 4px; font-size: 12px; color: rgb(5, 150, 105); }
.sim-at-ok .ic { width: 14px; height: 14px; }
.sim-at-hist { display: grid; gap: 12px; }
.sim-at-hist ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.sim-at-item { border: 1px solid var(--s-borda); border-radius: 6px; padding: 12px; }
.sim-at-item-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; }
.sim-at-item-topo b { font-weight: 500; }
.sim-at-item-topo small { margin-left: auto; font-size: 12px; color: var(--s-txt2); }
.sim-at-tipo { border-radius: 99px; padding: 2px 8px; font-size: 12px; font-weight: 500; }
.sim-at-tipo.t-V { background: rgba(16, 185, 129, .1); color: rgb(4, 120, 87); } .sim-at-tipo.t-P { background: rgba(14, 165, 233, .1); color: rgb(3, 105, 161); }
.sim-at-tipo.t-S { background: rgba(139, 92, 246, .1); color: rgb(109, 40, 217); } .sim-at-tipo.t-C { background: rgba(245, 158, 11, .1); color: rgb(180, 83, 9); }
.sim-at-st { border-radius: 99px; padding: 2px 8px; font-size: 12px; background: rgba(16, 185, 129, .1); color: rgb(4, 120, 87); }
.sim-at-st.enc { background: var(--s-muted); color: var(--s-txt2); }
.sim-at-info { margin: 6px 0 0; white-space: pre-wrap; font-size: 14px; }
.sim-at-ret { margin: 4px 0 0; font-size: 12px; color: var(--s-txt2); } .sim-at-ret strong { color: var(--s-txt); }
.sim-at-resp { margin: 4px 0 0; padding: 4px 8px; border-radius: 4px; background: color-mix(in srgb, var(--s-muted) 50%, transparent); font-size: 14px; }
.sim-at-botoes { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.sim-btn-p { padding: 5px 10px !important; font-size: 12.5px !important; }
.sim-btn-fantasma { border-color: transparent !important; background: transparent !important; box-shadow: none !important; }
.sim-at-acao { margin-top: 8px; display: grid; gap: 8px; }
.sim-at-acao textarea { width: 100%; border: 1px solid hsl(215 25% 85%); border-radius: 6px; padding: 8px 12px; font: inherit; font-size: 14px; background: var(--s-card); color: var(--s-txt); }
.sim-at-acao > div { display: flex; gap: 8px; }
.sim-hist { border: 1px solid var(--s-borda); border-radius: 10px; padding: .6rem .8rem; }
.sim-hist small { float: right; color: var(--s-txt2); } .sim-hist p { margin: .3rem 0 0; }
.sim-modal-body .vazio { color: var(--s-txt2); text-align: center; margin: 0; }
.sim-sec { border: 1px solid var(--s-borda); border-radius: 14px; padding: .9rem 1rem; display: grid; gap: .6rem; cursor: pointer; }
.sim-sec:hover { border-color: hsl(223 100% 80%); }
.sim-kpis3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.sim-kpis3.quatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sim-kpi { background: var(--s-muted); border-radius: 10px; padding: .6rem .7rem; display: grid; }
.sim-kpi small { color: var(--s-txt2); font-size: .7rem; font-weight: 700; } .sim-kpi b { font-size: 1.05rem; }
.sim-mini { margin: 0; font-size: .86rem; }
.sim-linha { display: flex; gap: .8rem; align-items: center; font-size: .85rem; padding: .25rem 0; border-bottom: 1px dashed var(--s-muted); }
.sim-linha span { flex: 1; } .sim-linha small { color: var(--s-txt2); }
.sim-duas { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.sim-curva { background: #f59e0b; color: #fff; border-radius: 99px; font-size: .72rem; padding: .15em .6em; font-weight: 700; }

/* ===== tela de login (igual ao Hub) ===== */
.sim-login { height: 100%; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; color: var(--s-txt); }
.sim-login-marca { position: relative; background: radial-gradient(900px 600px at 20% 30%, #0d2a6b 0%, #071338 55%, #050d27 100%); color: #cbd5e1; padding: 44px 46px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.sim-login-marca::after { content: ""; position: absolute; width: 520px; height: 520px; right: -200px; bottom: -220px; border-radius: 50%; background: radial-gradient(circle, rgba(56, 120, 255, .25), transparent 65%); }
.sim-login-topo { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 700; letter-spacing: .28em; color: #94a3b8; }
.sim-login-meio h1 { margin: 0; font-size: clamp(34px, 4.2vw, 46px); font-weight: 800; color: #e2e8f0; letter-spacing: -.02em; }
.sim-login-meio h1 b, .sim-abertura h1 b { color: var(--s-eletrico); }
.sim-login-meio p { margin: 8px 0 26px; font-size: 18px; color: #a8b3c7; }
.sim-login-meio ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.sim-login-meio li { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: #c3cde0; }
.sim-login-meio li span { width: 34px; height: 34px; border-radius: 10px; border: 1px solid rgba(96, 165, 250, .25); background: rgba(37, 99, 235, .12); display: grid; place-items: center; color: #60a5fa; }
.sim-login-marca > small { color: #8492a6; font-size: 12.5px; position: relative; z-index: 1; }
.sim-login-form { background: #fff; display: grid; place-items: center; padding: 24px; overflow-y: auto; }
.sim-login-caixa { width: min(380px, 100%); display: grid; gap: 14px; }
.sim-login-caixa h2 { margin: 0; font-size: 26px; font-weight: 700; }
.sim-login-caixa > p { margin: -8px 0 4px; color: var(--s-txt2); font-size: 14px; }
.sim-login-campo { display: grid; gap: 6px; font-weight: 600; font-size: 13.5px; color: var(--s-txt); }
.sim-login-campo > div { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 12px; border: 1px solid hsl(215 25% 88%); border-radius: 12px; background: hsl(210 40% 98%); color: var(--s-txt2); }
.sim-login-campo > div:focus-within { border-color: var(--s-primary); box-shadow: 0 0 0 3px hsl(223 100% 59% / .15); background: #fff; }
.sim-login-campo input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-weight: 500; font-size: 15px; color: var(--s-txt); }
.sim-olho { border: 0; background: none; cursor: pointer; color: var(--s-txt2); display: grid; padding: 4px; }
.sim-btn-entrar { height: 46px; border: 0; border-radius: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-weight: 700; font-size: 15px; color: #fff; background: linear-gradient(90deg, hsl(223 100% 59%), hsl(262 83% 58%)); box-shadow: 0 10px 24px -12px hsl(243 90% 55% / .9); }
.sim-btn-entrar:hover { filter: brightness(1.06); }
.sim-login-links { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 13px; color: var(--s-txt2); flex-wrap: wrap; }
.sim-login-links button { border: 0; background: none; cursor: pointer; color: var(--s-txt2); display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 13px; }
.sim-login-links button:hover { color: var(--s-primary); }
.sim-login-links .ic { width: 14px; height: 14px; }
.sim-login-versao { text-align: center; color: var(--s-txt2); font-size: 12px; margin-top: 4px; }
.sim-erro-login { color: hsl(358 75% 50%); background: #fef2f2; border: 1px solid #fecaca; border-radius: 10px; padding: 8px 12px; font-size: 13px; font-weight: 600; }

/* ===== animação de abertura ===== */
.sim-abertura { height: 100%; display: grid; place-content: center; justify-items: center; text-align: center; gap: 8px; background: radial-gradient(900px 600px at 50% 20%, #12307a, #071338 60%, #050d27); color: #e2e8f0; overflow: hidden; }
.sim-abertura-logo { animation: simLogo 1.4s ease-out both; }
.sim-abertura-logo .sim-marca-ic { width: 64px; height: 64px; border-radius: 18px; box-shadow: 0 0 0 10px rgba(56, 120, 255, .12), 0 0 50px rgba(56, 120, 255, .5); }
.sim-abertura-logo .sim-marca-ic i { width: 34px; height: 34px; }
.sim-abertura h1 { margin: 14px 0 0; font-size: 34px; font-weight: 800; animation: simSobe .6s .5s ease-out both; }
.sim-abertura p { margin: 0; color: #a8b3c7; animation: simSobe .6s .8s ease-out both; }
.sim-abertura small { margin-top: 18px; font-size: 11px; letter-spacing: .3em; color: #64748b; animation: simSobe .6s 1.1s ease-out both; }
@keyframes simLogo { 0% { transform: scale(.3) rotate(-90deg); opacity: 0; } 60% { transform: scale(1.1) rotate(8deg); opacity: 1; } 100% { transform: none; } }
@keyframes simSobe { from { transform: translateY(12px); opacity: 0; } }

/* ===== tema escuro (cores do Hub) ===== */
.sim.escuro { --s-bg: hsl(222 43% 10%); --s-card: hsl(221 42% 14%); --s-borda: hsl(219 34% 21%); --s-txt: hsl(222 77% 95%); --s-txt2: hsl(215 20% 65%); --s-muted: hsl(219 34% 21%); --s-accent: hsl(219 34% 24%); --s-side: hsl(220 49% 8%); --s-primary: hsl(217 91% 60%); }
.sim.escuro .sim-icon-btn, .sim.escuro .sim-pill { color: var(--s-txt) !important; }
.sim.escuro .sim-rotina, .sim.escuro .sim-rotina input::placeholder { color: var(--s-txt); }
.sim.escuro .sim-flash { background: #14532d; color: #dcfce7; border-color: #166534; }
.sim.escuro .sim-aviso.amarelo { background: #422006; color: #fde68a; border-color: #713f12; }

/* destaque do alvo (dica), foco de explicação e acerto */
.sim-alvo { outline: 3px solid #f43f5e !important; outline-offset: 3px; border-radius: 10px; animation: simAlvo 1.1s ease-in-out infinite; }
@keyframes simAlvo { 50% { outline-color: rgba(244, 63, 94, .25) !important; box-shadow: 0 0 0 10px rgba(244, 63, 94, .12); } }
.sim-foco { outline: 3px solid #fbbf24 !important; outline-offset: -3px; border-radius: 12px; box-shadow: 0 0 0 8px rgba(251, 191, 36, .18); transition: outline-color .3s; }
/* pisca o item que a voz está explicando (3 vezes) */
.sim-pisca { animation: simPisca .9s ease-in-out 3 !important; border-radius: 12px; }
@keyframes simPisca {
  0%, 100% { outline: 3px solid rgba(251, 191, 36, 0); outline-offset: 2px; box-shadow: 0 0 0 0 rgba(251, 191, 36, 0); }
  45% { outline: 3px solid #f59e0b; outline-offset: 2px; box-shadow: 0 0 0 7px rgba(251, 191, 36, .45), 0 0 18px 4px rgba(245, 158, 11, .55); background-color: rgba(253, 230, 138, .55); }
}
.sim-ok { border-color: #16a34a !important; background: #f0fdf4 !important; outline: 2px solid #bbf7d0 !important; }

/* ===== responsivo ===== */
@media (max-width: 1180px) {
  .sim-rotina-ex { display: none !important; }
}
@media (max-width: 640px) { .sim-licenca { display: none !important; } }
@media (max-width: 1100px) {
  .sim-cards4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sim .col-seg, .sim .col-vend { display: none; }
  .sim-filtros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sim-banner { padding-right: 20px; } .sim-banner-btn { position: static; transform: none; justify-self: start; margin-top: 4px; }
}
@media (max-width: 900px) {
  .sim, .sim.mini { grid-template-columns: minmax(0, 1fr); }
  .sim-side { position: absolute; top: 0; bottom: 0; left: 0; width: 260px; transform: translateX(-105%); transition: transform .25s; box-shadow: 0 0 40px rgba(0, 0, 0, .35); }
  .sim.drawer-on .sim-side { transform: none; }
  .sim.drawer-on .sim-fundo { display: block; position: absolute; inset: 0; background: rgba(15, 23, 42, .45); z-index: 15; }
  .sim.mini .sim-logo-txt, .sim.mini .sim-nav-t, .sim.mini .sim-nav-n, .sim.mini .sim-badge, .sim.mini .sim-grupo { display: revert !important; }
  .sim .col-doc, .sim .col-cid { display: none; }
  .sim-login { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .sim-login-marca { padding: 22px 24px; gap: 14px; }
  .sim-login-meio ul, .sim-login-marca > small { display: none; }
  .sim-login-meio h1 { font-size: 30px; } .sim-login-meio p { margin: 4px 0 0; font-size: 14px; }
}
@media (max-width: 640px) {
  .sim { font-size: 13px; }
  .sim-header { padding: 12px 12px 6px; gap: 10px; }
  .sim-header-top { flex-wrap: wrap; gap: 10px; }
  .sim-bemvindo { flex-basis: calc(100% - 54px); }
  .sim-bemvindo b { font-size: 16px; } .sim-bemvindo small { font-size: 11px; }
  .sim-header-acoes { width: 100%; justify-content: space-between; gap: 6px; }
  .sim-icon-btn, .sim-avatar { width: 36px; height: 36px; }
  .sim-pill { padding: 0 10px; }
  .sim-rotina kbd { display: none; }
  .sim-content { padding: 6px 12px 1.5rem; }
  .sim-cards2 { grid-template-columns: 1fr; }
  .sim-acoes { justify-content: stretch; }
  .sim-acoes .sim-btn:not(.sim-btn-azul) { display: none !important; }
  .sim-acoes .sim-btn-azul { flex: 1; justify-content: center; padding: .7em; }
  .sim-kpis .sim-card > .ic { display: none; }
  .sim-grid { grid-template-columns: minmax(0, 1fr); }
  .sim-campo, .sim-campo.terco, .sim-campo.doisTercos { grid-column: 1 / -1; }
  .sim-overlay { padding: .4rem; }
  .sim-modal { border-radius: 14px; }
  .sim-kpis3, .sim-kpis3.quatro, .sim-duas { grid-template-columns: 1fr 1fr; }
  .sim-at-grid { grid-template-columns: 1fr; }
  .sim-filtros { grid-template-columns: 1fr; }
  .sim .col-uf { display: none; }
  .sim-pop-wrap { position: static; }
  .sim-pop, .sim-pop-ajuda, .sim-pop.sim-pop-nov { left: 8px; right: 8px; top: 100%; width: auto; }
  .sim-login-topo { font-size: 11px; letter-spacing: .2em; }
}

/* ===== Fornecedores (rotina 0007) ===== */
.sim-forn-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.sim-forn-topo .sim-titulo h2 { font-size: 20px; } .sim-forn-topo .sim-titulo h2 .ic { width: 20px; height: 20px; color: var(--s-primary); }
.sim-sub { color: var(--s-txt2); font-size: 13px; }
.sim-forn-acoes { display: flex; gap: 8px; }
.sim-forn-filtros { flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px; }
.sim-forn-filtros input, .sim-forn-filtros select { height: 36px; border: 1px solid hsl(215 25% 85%); border-radius: 8px; padding: 0 10px; background: var(--s-card); color: var(--s-txt); font: inherit; font-size: 13.5px; flex: 1 1 110px; min-width: 0; }
.sim-forn-filtros select { flex: 0 0 auto; }
.sim-tabela tr.clicavel { cursor: pointer; } .sim-tabela tr.clicavel:hover td { background: var(--s-muted); }
.sim-tabela tr.apagado { opacity: .5; }
.sim-tabela-forn td.sim-linha-acoes { color: var(--s-txt2); text-align: right; }
.sim-tabela-forn tr:hover td.sim-linha-acoes { color: var(--s-primary); }
.sim-st { border-radius: 99px; padding: 2px 8px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.sim-st.ativo { background: rgb(22 162 73 / .15); color: var(--s-verde); }
.sim-st.bloq { background: rgb(245 158 11 / .15); color: #d97706; }
.sim-modal-forn { width: min(1024px, 100%); }
.sim-modal-reps { width: min(768px, 100%); }
.sim-overlay.sobre { z-index: 31; }
.sim-campo.s1 { grid-column: span 1; } .sim-campo.s2 { grid-column: span 2; } .sim-campo.s3 { grid-column: span 3; } .sim-campo.s4 { grid-column: span 4; } .sim-campo.s6 { grid-column: 1 / -1; }
.sim-campo > span { font-size: 12px; }
.sim-modal-forn .sim-campo input, .sim-modal-reps .sim-campo input { height: 36px; padding: 0 10px; border-radius: 8px; }
.sim-campo input:disabled { background: var(--s-muted); color: var(--s-txt2); }
.sim-campo select { height: 36px; border: 1px solid hsl(215 25% 85%); border-radius: 8px; padding: 0 8px; background: var(--s-card); color: var(--s-txt); font: inherit; }
.sim-obrig { color: #dc2626; font-style: normal; }
.sim-radio.pequeno { font-weight: 500; font-size: 13.5px; gap: 6px; padding: 1px 0; }
.sim-radio.pequeno i { width: 15px; height: 15px; } .sim-radio.pequeno.on i::after { width: 7px; height: 7px; }
.sim-campo .sim-radios { gap: 4px 16px; }
.sim-cb { display: inline-flex !important; align-items: center; gap: 8px; font-size: 13.5px; }
.sim-cb i { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid #94a3b8; display: grid; place-items: center; flex: none; }
.sim-cb.on i { background: var(--s-primary); border-color: var(--s-primary); color: #fff; }
.sim-cb i .ic { width: 12px; height: 12px; stroke-width: 3; }
.sim-cb-par { display: flex !important; gap: 24px; }
.sim-cb-par > div { display: grid; gap: 6px; } .sim-cb-par span { font-size: 12px; font-weight: 600; }
.sim-cbs { display: flex; flex-wrap: wrap; gap: 8px 24px; padding-top: 4px; }
.sim-secao { border: 1px solid var(--s-borda); border-radius: 8px; padding: 12px; display: grid; gap: 10px; }
.sim-secao-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sim-secao-topo p { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .05em; color: var(--s-txt2); }
/* dentro do corpo rolável a barra de abas encolhia até sumir: sem overflow próprio e com altura mínima */
.sim-abas-forn { padding: 0; gap: 4px; overflow: visible; flex-wrap: wrap; min-height: 36px; flex-shrink: 0; }
.sim-abas-forn .sim-aba { padding: 6px 12px; font-size: 13.5px; font-weight: 500; }
.sim-rodape-info { color: var(--s-txt2); font-size: 11px; }
.sim-erro-caixa { margin: 0; display: flex; align-items: center; gap: 8px; border-radius: 8px; background: #fef2f2; color: #dc2626; padding: 8px 12px; font-size: 13.5px; }
.sim-rodape-esq { justify-content: flex-start; }
.sim-btn-excluir { margin-left: auto; color: #dc2626 !important; }
.sim-direita { display: flex; justify-content: flex-end; }
.sim.escuro .sim-erro-caixa { background: rgb(220 38 38 / .15); }
@media (max-width: 900px) { .sim .col-fant { display: none; } }
@media (max-width: 640px) {
  .sim-campo.s1, .sim-campo.s2, .sim-campo.s3, .sim-campo.s4 { grid-column: 1 / -1; }
  .sim-forn-acoes { width: 100%; } .sim-forn-acoes .sim-btn-azul { flex: 1; justify-content: center; }
  .sim-forn-filtros { gap: 8px; padding: 10px; }
  .sim-forn-filtros input, .sim-forn-filtros select { flex: 1 1 calc(50% - 4px); max-width: none !important; height: 34px; }
}

/* ===== Cefas Sourcing (cotação · pregão) ===== */
.sim { --s-roxo2: hsl(262 83% 58%); --s-ambar: hsl(38 92% 45%); }
.sc-topo { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.sc-titulo-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sc-titulo-linha h2 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.sc-tag { border-radius: 4px; background: hsl(262 83% 58% / .15); color: var(--s-roxo2); font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 2px 6px; }
.sc-chip { border-radius: 99px; padding: 2px 8px; font-size: 10px; font-weight: 700; text-transform: uppercase; white-space: nowrap; background: var(--s-muted); color: var(--s-txt2); }
.sc-st-detalhe, .sc-st-encerrada { background: hsl(223 100% 59% / .1); color: var(--s-primary); }
.sc-st-em_pregao, .sc-fst-lancou { background: rgb(22 162 73 / .15); color: var(--s-verde); }
.sc-st-pedido_gerado { background: hsl(262 83% 58% / .15); color: var(--s-roxo2); }
.sc-st-cancelada { background: rgb(220 38 38 / .15); color: #dc2626; }
.sc-fst-acessou { background: hsl(223 100% 59% / .1); color: var(--s-primary); }
.sc-tabela { font-size: 13px; } .sc-tabela th { font-size: 10.5px; padding: 8px 10px; background: var(--s-muted); } .sc-tabela td { padding: 7px 10px; }
.sc-tabela .dir { text-align: right; }
.sim .ic.sc-mini { width: 14px; height: 14px; margin-right: 5px; vertical-align: -2px; color: var(--s-txt2); }
.sc-voltar { display: flex !important; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--s-txt2) !important; margin-bottom: 4px; }
.sc-voltar .ic { width: 14px; height: 14px; }
.sc-cab { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.sc-dt { display: grid; gap: 4px; } .sc-dt span { font-size: 11px; font-weight: 700; color: var(--s-txt2); }
.sc-dt input, .sc-f input, .sc-f select, .sc-busca-linha input { height: 36px; border: 1px solid hsl(215 25% 85%); border-radius: 8px; padding: 0 10px; background: var(--s-card); color: var(--s-txt); font: inherit; font-size: 13px; min-width: 0; }
.sc-encerra { text-align: right; font-size: 12px; color: var(--s-txt2); }
.sc-btn-vermelho { background: #dc2626 !important; border-color: #dc2626 !important; color: #fff !important; }
.sc-toast { display: flex; align-items: center; gap: 8px; border-radius: 10px; border: 1px solid rgb(22 162 73 / .4); background: rgb(22 162 73 / .06); color: var(--s-verde); padding: 8px 12px; font-size: 13.5px; }
.sc-toast.erro { border-color: rgb(220 38 38 / .4); background: rgb(220 38 38 / .05); color: #dc2626; }
.sc-abas { display: flex; gap: 4px; border-bottom: 1px solid var(--s-borda); }
.sc-aba { display: flex !important; align-items: center; gap: 6px; padding: 8px 16px; margin-bottom: -1px; border-bottom: 2px solid transparent !important; font-weight: 600; color: var(--s-txt2) !important; }
.sc-aba.on { border-bottom-color: var(--s-primary) !important; color: var(--s-primary) !important; }
.sc-caixa { background: var(--s-card); border: 1px solid var(--s-borda); border-radius: 10px; padding: 16px; display: grid; gap: 10px; box-shadow: 0 1px 2px rgba(0,0,0,.04); min-width: 0; }
.sc-caixa h3 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--s-txt2); }
.sc-caixa h3 .ic { width: 16px; height: 16px; }
.sc-caixa-topo, .sc-lista-linha { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sc-flex { flex: 1; min-width: 0; }
.sc-qtde { width: 86px; height: 30px; border: 1px solid hsl(215 25% 85%); border-radius: 6px; padding: 0 8px; text-align: right; background: var(--s-muted); color: var(--s-txt); font: inherit; }
.sc-lixo { width: 28px; height: 28px; border-radius: 6px; display: grid !important; place-items: center; color: #dc2626 !important; }
.sc-lixo .ic { width: 15px; height: 15px; }
.sc-rapida { display: grid; grid-template-columns: 1fr 3fr 1fr 1fr; gap: 8px; border: 1px dashed var(--s-borda); border-radius: 10px; padding: 10px; align-items: center; }
.sc-rapida small { grid-column: 1 / -1; font-size: 11px; font-weight: 700; color: var(--s-txt2); }
.sc-rapida input { height: 32px; border: 1px solid var(--s-borda); border-radius: 6px; padding: 0 8px; background: var(--s-muted); font: inherit; font-size: 13px; min-width: 0; }
.sc-rapida .sim-btn { justify-content: center; }
.sc-duas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sc-lista { list-style: none; margin: 0; padding: 0; border: 1px solid var(--s-borda); border-radius: 10px; }
.sc-lista > li { padding: 9px 12px; display: grid; gap: 6px; font-size: 13px; } .sc-lista > li + li { border-top: 1px solid var(--s-borda); }
.sc-lista > li.vazio { text-align: center; padding: 22px; color: var(--s-txt2); }
.sc-envio { display: flex; flex-wrap: wrap; gap: 6px; }
.sc-envio button { display: inline-flex !important; align-items: center; gap: 4px; border: 1px solid var(--s-borda) !important; border-radius: 6px; padding: 4px 8px; font-size: 11.5px; }
.sc-envio button:hover { background: var(--s-accent); } .sc-envio .ic { width: 14px; height: 14px; }
.sc-busca-linha { display: flex; gap: 8px; } .sc-busca-linha input { flex: 1; }
.sc-resultados { list-style: none; margin: 0; padding: 0; border: 1px solid var(--s-borda); border-radius: 8px; font-size: 13px; }
.sc-resultados li + li { border-top: 1px solid var(--s-borda); }
.sc-resultados button { width: 100%; display: flex !important; justify-content: space-between; gap: 8px; padding: 7px 10px; }
.sc-resultados button:hover { background: var(--s-accent); } .sc-resultados small { color: var(--s-txt2); }
.sc-escolhido { border: 1px solid var(--s-borda); border-radius: 8px; padding: 10px; display: grid; gap: 8px; font-size: 13px; }
.sc-link { color: var(--s-primary) !important; font-size: 12px; cursor: pointer; }
.sc-rotulo { margin: 0; font-size: 11px; font-weight: 700; color: var(--s-txt2); }
.sc-reps { list-style: none; margin: 0; padding: 0; border: 1px solid var(--s-borda); border-radius: 8px; }
.sc-reps li + li { border-top: 1px solid var(--s-borda); }
.sc-rep { width: 100%; display: flex !important; align-items: center; gap: 8px; padding: 7px 10px; }
.sc-rep:hover { background: var(--s-accent); } .sc-rep small { color: var(--s-txt2); font-size: 11px; }
.sc-cb { width: 16px; height: 16px; } .sc-cb i { width: 16px; height: 16px; }
.sc-mapa td { vertical-align: top; }
.sc-fixa { position: sticky; left: 0; background: var(--s-card); z-index: 1; }
.sc-mapa th.sc-fixa { background: var(--s-muted); }
.sc-menor { background: rgb(22 162 73 / .06); }
.sc-celula { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.sc-preco { font-weight: 700; white-space: nowrap; }
.sc-preco.verde, .sc-legenda .verde { color: var(--s-verde); } .sc-preco.ambar, .sc-legenda .ambar { color: var(--s-ambar); }
.sc-preco.sub { text-decoration: underline; text-decoration-color: var(--s-verde); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.sim .ic.sc-trofeu { width: 12px; height: 12px; color: var(--s-roxo2); margin-right: 2px; vertical-align: -1px; }
.sc-cel-botoes { display: flex; gap: 6px; }
.sc-cel-botoes button { border: 1px solid var(--s-borda) !important; border-radius: 6px; padding: 3px 9px; font-size: 11px; font-weight: 700; background: var(--s-card) !important; }
.sc-cel-botoes button:hover { background: var(--s-accent) !important; }
.sc-cel-botoes button.venc { border-color: hsl(262 83% 58% / .4) !important; background: hsl(262 83% 58% / .15) !important; color: var(--s-roxo2) !important; }
.sc-legenda { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 12px; color: var(--s-txt2); } .sc-legenda .ic { width: 14px; height: 14px; }
/* janelas */
.sc-nova { width: min(512px, 100%); } .sc-pk { width: min(1152px, 100%); } .sc-ped { width: min(896px, 100%); } .sc-conf { width: min(440px, 100%); }
.sc-modos { display: grid; gap: 8px; } .sc-rotulo2 { font-size: 13px; font-weight: 600; }
.sc-modo { display: flex !important; align-items: flex-start; gap: 12px; border: 1px solid var(--s-borda) !important; border-radius: 10px; padding: 12px; }
.sc-modo .ic { width: 20px; height: 20px; color: var(--s-txt2); margin-top: 2px; }
.sc-modo b { display: block; font-size: 13.5px; } .sc-modo small { display: block; color: var(--s-txt2); font-size: 12px; }
.sc-modo.on { border-color: var(--s-primary) !important; background: hsl(223 100% 59% / .05); box-shadow: 0 0 0 1px var(--s-primary); } .sc-modo.on .ic { color: var(--s-primary); }
.sc-filtros { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.sc-f { display: grid; gap: 3px; min-width: 0; } .sc-f > span { font-size: 11px; font-weight: 700; color: var(--s-txt2); } .sc-f.dois { grid-column: span 2; }
.sc-pk-tabela { max-height: 46vh; overflow: auto; }
.sc-pk thead th { position: sticky; top: 0; z-index: 1; }
.sc-pk tr.on td { background: hsl(223 100% 59% / .05); }
.sc-pk .sc-qtde { background: var(--s-card); }
.sc-neg { color: #dc2626; font-weight: 700; } .sc-sug { color: var(--s-primary); font-weight: 700; }
.sc-ped-campos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.sc-grupos { display: grid; gap: 8px; }
.sc-grupo { border: 1px solid var(--s-borda); border-radius: 10px; padding: 8px 12px; } .sc-grupo.on { border-color: hsl(223 100% 59% / .4); }
.sc-grupo-nome { text-align: left; } .sc-grupo-nome small { color: var(--s-txt2); }
.sc-grupo-itens { width: 100%; border-top: 1px solid var(--s-borda); margin-top: 8px; font-size: 12px; border-collapse: collapse; }
.sc-grupo-itens td { padding: 4px 8px; } .sc-grupo-itens .dir { text-align: right; }
.sc-alerta { display: flex; gap: 8px; border: 1px solid hsl(38 92% 50% / .4); background: hsl(38 92% 50% / .06); color: var(--s-ambar); border-radius: 10px; padding: 10px; font-size: 13px; }
.sc-erro { display: flex; align-items: center; gap: 4px; color: #dc2626; font-size: 13px; }
.sc-ped-total { align-self: center; }
/* WhatsApp (exemplo) */
.sc-wa-fundo { z-index: 40; }
.sc-wa { display: grid; gap: 12px; justify-items: center; }
.sc-wa-aviso { background: #fff; color: #0f172a; border-radius: 99px; padding: 6px 14px; font-size: 12.5px; font-weight: 700; box-shadow: 0 6px 20px rgba(0,0,0,.2); }
.sc-wa-cel { width: min(340px, 92vw); height: min(520px, 62vh); border-radius: 30px; border: 8px solid #111827; background: #efeae2; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 30px 60px rgba(0,0,0,.35); }
.sc-wa-topo { background: #008069; color: #fff; display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.sc-wa-topo b { display: block; font-size: 13px; } .sc-wa-topo small { font-size: 11px; opacity: .85; }
.sc-wa-av { width: 34px; height: 34px; border-radius: 50%; background: #fff; color: #008069; display: grid; place-items: center; font-weight: 800; font-size: 13px; }
.sc-wa-x { margin-left: auto; color: #fff !important; } .sc-wa-x .ic { width: 18px; height: 18px; }
.sc-wa-chat { flex: 1; padding: 14px 10px; overflow: auto; background: #efeae2 radial-gradient(rgba(0,0,0,.04) 1px, transparent 1px) 0 0 / 14px 14px; }
.sc-wa-msg { background: #fff; color: #111b21; border-radius: 0 10px 10px 10px; padding: 8px 10px 4px; font-size: 13px; max-width: 92%; box-shadow: 0 1px 1px rgba(0,0,0,.1); animation: scWa .5s ease-out; }
.sc-wa-msg p { margin: 0 0 6px; } .sc-wa-msg small { display: block; text-align: right; color: #667781; font-size: 10.5px; }
.sc-wa-link { color: #027eb5; text-decoration: underline; word-break: break-all; }
.sc-wa-rodape { display: flex; justify-content: space-between; align-items: center; margin: 8px; background: #fff; border-radius: 99px; padding: 8px 14px; color: #8696a0; font-size: 13px; }
@keyframes scWa { from { opacity: 0; transform: translateY(14px) scale(.96); } }
/* portal do representante */
.sim.sc-portal-raiz, .sim.sc-intro-raiz { display: block; overflow-y: auto; background: hsl(213 36% 96%); }
.sc-pt-faixa { position: sticky; top: 0; z-index: 5; background: #fef3c7; color: #92400e; border-bottom: 1px solid #fcd34d; padding: 6px 16px; font-size: 13px; text-align: center; }
.sc-pt-topo { background: linear-gradient(120deg, rgb(46, 105, 255), rgb(29, 78, 216)); color: #fff; padding: 18px 28px; display: grid; gap: 8px; }
.sc-pt-topo > small:first-child { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; opacity: .85; }
.sc-pt-topo h2 { margin: 0; font-size: 22px; }
.sc-pt-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; font-size: 13px; }
.sc-pt-comprador { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); border-radius: 10px; padding: 6px 12px; display: grid; }
.sc-pt-comprador small { font-size: 10px; opacity: .85; }
.sc-pt-status { border-radius: 99px; padding: 3px 10px; background: rgba(255,255,255,.2); font-size: 12px; font-weight: 700; }
.sc-pt-status.vivo { background: #16a34a; animation: scVivo 1.6s infinite; }
@keyframes scVivo { 50% { box-shadow: 0 0 0 6px rgb(22 163 74 / .25); } }
.sc-pt-corpo { padding: 18px 28px 28px; display: grid; gap: 12px; }
.sc-pt-ajuda, .sc-pt-kpis, .sc-pt-busca { background: var(--s-card); border: 1px solid var(--s-borda); border-radius: 12px; padding: 10px 14px; font-size: 13px; }
.sc-pt-ajuda { color: var(--s-primary); display: flex; justify-content: space-between; }
.sc-pt-kpis { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
.sc-pt-kpis > div:not(.sc-pt-barra) { display: grid; } .sc-pt-kpis b { font-size: 20px; line-height: 1; } .sc-pt-kpis small { font-size: 10px; font-weight: 700; color: var(--s-txt2); }
.sc-pt-kpis .verde b { color: var(--s-verde); }
.sc-pt-barra { flex: 1; min-width: 160px; display: grid; gap: 4px; }
.sc-pt-barra::before { content: ""; grid-area: 1 / 1; height: 8px; border-radius: 99px; background: var(--s-muted); }
.sc-pt-barra i { grid-area: 1 / 1; height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--s-primary), #22c55e); transition: width .6s; }
.sc-pt-busca { display: flex; justify-content: space-between; color: var(--s-txt2); }
.sc-pt-tabela td { vertical-align: middle; }
.sc-pt-tabela tr.sc-pt-digitando td { background: hsl(223 100% 59% / .05); }
.sc-pos { display: inline-flex; align-items: center; gap: 6px; } .sc-pos > span:last-child { display: grid; line-height: 1.15; }
.sc-pos small { font-size: 10.5px; color: var(--s-txt2); } .sc-pos.p1 b { color: var(--s-verde); }
.sc-pos > span:first-child { font-size: 18px; }
.sc-pt-preco { display: flex; align-items: center; gap: 8px; width: 120px; height: 34px; border: 1px solid hsl(215 25% 85%); border-radius: 8px; padding: 0 10px; background: var(--s-card); }
.sc-pt-preco span { font-size: 11px; color: var(--s-txt2); } .sc-pt-preco b { flex: 1; text-align: right; }
.sc-pt-preco.foco { border-color: var(--s-primary); box-shadow: 0 0 0 3px hsl(223 100% 59% / .2); }
.sc-pt-preco.salvo { border-color: #86efac; }
.sc-cursor { display: inline-block; width: 1px; height: 15px; background: var(--s-txt); margin-left: 1px; vertical-align: -2px; animation: scCursor 1s steps(1) infinite; }
@keyframes scCursor { 50% { opacity: 0; } }
.sc-salvo { color: var(--s-verde); font-size: 10.5px; }
.sc-pt-marca, .sc-pt-cond { display: inline-block; border: 1px solid var(--s-borda); border-radius: 8px; padding: 5px 10px; font-size: 12px; color: var(--s-txt2); white-space: nowrap; }
.sc-pt-cond { color: var(--s-primary); }
.sc-pt-rodape { text-align: center; font-size: 11px; color: var(--s-txt2); }
/* abertura animada */
.sc-intro { min-height: 100%; display: grid; align-content: center; justify-items: center; gap: 18px; padding: 24px; text-align: center; background: radial-gradient(circle at 50% 0, hsl(223 100% 59% / .12), transparent 60%); }
.sc-in-tag { font-size: 11px; font-weight: 800; letter-spacing: .14em; color: var(--s-roxo2); }
.sc-in-titulo { margin: 0; font-size: clamp(20px, 3vw, 30px); max-width: 760px; animation: scSobe .6s ease-out; }
.sc-in-loja { display: flex; align-items: center; gap: 12px; background: var(--s-card); border: 2px solid var(--s-primary); border-radius: 16px; padding: 10px 18px; text-align: left; box-shadow: 0 10px 30px -12px hsl(223 100% 59% / .6); }
.sc-in-loja > span { font-size: 34px; } .sc-in-loja b { display: block; font-size: 16px; } .sc-in-loja small { color: var(--s-txt2); font-size: 13px; }
.sc-in-um { display: grid; justify-items: center; gap: 10px; }
.sc-in-tres { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.sc-in-forn { position: relative; width: 190px; background: var(--s-card); border: 1px solid var(--s-borda); border-radius: 16px; padding: 16px 12px; display: grid; justify-items: center; gap: 6px; box-shadow: 0 8px 24px -14px rgba(0,0,0,.4); animation: scEntra .6s ease-out both; animation-delay: calc(var(--i, 0) * .35s); transition: transform .4s, border-color .4s, box-shadow .4s; }
.sc-in-emoji { font-size: 38px; }
.sc-in-preco { font-size: 24px; font-weight: 800; } .sc-in-preco small { font-size: 11px; font-weight: 500; color: var(--s-txt2); margin-left: 3px; }
.sc-in-pos { font-size: 13px; font-weight: 700; color: var(--s-txt2); } .sc-in-pos.p1 { color: var(--s-verde); }
.sc-in-forn.lider { border-color: #22c55e; transform: translateY(-8px); box-shadow: 0 16px 30px -14px rgb(22 163 74 / .7); }
.sc-in-forn.caiu .sc-in-preco { animation: scCai .9s ease-out; }
.sc-in-forn.venceu { border-width: 2px; transform: translateY(-10px) scale(1.06); }
.sc-in-forn.sozinho { width: 230px; }
.sc-in-trofeu { position: absolute; top: -14px; background: var(--s-verde); color: #fff; border-radius: 99px; padding: 3px 10px; font-size: 12px; font-weight: 800; white-space: nowrap; animation: scSobe .5s ease-out; }
.sc-in-nota { margin: 0; color: var(--s-txt2); font-size: 15px; }
.sc-in-total { font-size: 18px; } .sc-in-total b { color: #dc2626; }
.sc-in-economia { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; background: var(--s-card); border: 1px solid var(--s-borda); border-radius: 16px; padding: 14px 20px; animation: scSobe .7s ease-out .3s both; }
.sc-in-economia > div { display: grid; } .sc-in-economia small { font-size: 12px; color: var(--s-txt2); }
.sc-in-economia s { color: #dc2626; font-size: 18px; } .sc-in-economia b { font-size: 20px; color: var(--s-verde); } .sc-in-economia > span { font-size: 22px; color: var(--s-txt2); }
.sc-in-ganho { background: rgb(22 162 73 / .12); border-radius: 12px; padding: 8px 14px; color: var(--s-verde); font-size: 15px; }
@keyframes scEntra { from { opacity: 0; transform: translateY(24px) scale(.9); } }
@keyframes scSobe { from { opacity: 0; transform: translateY(12px); } }
@keyframes scCai { 0% { color: #dc2626; transform: translateY(-10px) scale(1.25); } 60% { color: var(--s-verde); transform: none; } }
.sim.escuro .sc-pt-faixa { background: #422006; color: #fde68a; border-color: #92400e; }
@media (max-width: 900px) {
  .sc-duas { grid-template-columns: minmax(0, 1fr); }
  .sc-filtros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc-ped-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc-pt-topo, .sc-pt-corpo { padding-left: 14px; padding-right: 14px; }
}
@media (max-width: 640px) {
  .sc-cab { width: 100%; } .sc-cab .sim-btn { flex: 1; justify-content: center; }
  .sc-in-forn { width: 150px; padding: 12px 8px; } .sc-in-preco { font-size: 19px; }
  .sc-rapida { grid-template-columns: 1fr 1fr; }
  .sc-ped-campos, .sc-filtros { grid-template-columns: minmax(0, 1fr); } .sc-f.dois { grid-column: auto; }
}

/* ===== Pedido de Compra (rotina 33) ===== */
.pc-chip-rotina { border-radius: 4px; background: rgb(22 162 73 / .15); color: var(--s-verde); font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 2px 6px; }
.pc-voltar { color: var(--s-txt2) !important; display: grid !important; place-items: center; } .pc-voltar .ic { width: 20px; height: 20px; }
.pc-f { display: grid; gap: 4px; min-width: 0; align-content: start; } .pc-f > span { font-size: 11.5px; font-weight: 600; color: var(--s-txt2); }
.pc-f input, .pc-f select { height: 40px; border: 1px solid hsl(215 25% 85%); border-radius: 10px; padding: 0 12px; background: var(--s-card); color: var(--s-txt); font: inherit; font-size: 13.5px; min-width: 0; width: 100%; }
.pc-f input:disabled { background: var(--s-muted); }
.pc-f.dois { grid-column: span 2; }
.pc-grade4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 12px; }
.pc-grade3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; }
.pc-radios { height: 40px; display: flex; align-items: center; gap: 20px; border: 1px solid hsl(215 25% 85%); border-radius: 10px; padding: 0 12px; }
.pc-picker { position: relative; } .pc-picker-linha { display: flex; gap: 4px; }
.pc-campo-btn { flex: 1; min-width: 0; height: 40px; display: flex !important; align-items: center; gap: 8px; border: 1px solid hsl(215 25% 85%) !important; border-radius: 10px; padding: 0 12px; background: var(--s-card) !important; font-size: 13.5px; }
.pc-campo-btn:hover { background: var(--s-accent) !important; } .pc-campo-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pc-campo-btn .ic { color: var(--s-txt2); width: 16px; height: 16px; }
.ph { color: var(--s-txt2); }
.pc-limpar { width: 40px; height: 40px; flex: none; border: 1px solid hsl(215 25% 85%) !important; border-radius: 10px; display: grid !important; place-items: center; color: var(--s-txt2) !important; }
.pc-pop { position: absolute; left: 0; top: calc(100% + 6px); z-index: 40; width: 100%; min-width: 300px; background: var(--s-card); border: 1px solid var(--s-borda); border-radius: 12px; box-shadow: 0 20px 40px -12px rgba(15, 23, 42, .3); list-style: none; margin: 0; padding: 4px; }
.pc-pop-busca { padding: 6px; border-bottom: 1px solid var(--s-borda); } .pc-pop-busca input { width: 100%; height: 36px; border: 1px solid var(--s-borda); border-radius: 9px; padding: 0 10px; font: inherit; font-size: 13px; background: var(--s-card); color: var(--s-txt); }
.pc-picker-lista, ul.pc-prod-lista { list-style: none; margin: 0; padding: 4px; max-height: 260px; overflow-y: auto; }
.pc-picker-lista button, .pc-prod-lista button { width: 100%; display: grid !important; gap: 2px; padding: 8px 12px; border-radius: 8px; text-align: left; font-size: 13px; }
.pc-picker-lista button:hover, .pc-prod-lista button:hover { background: var(--s-accent); }
.pc-picker-lista small, .pc-prod-lista small { color: var(--s-txt2); font-size: 11px; } .pc-prod-lista b span { color: var(--s-txt2); font-weight: 500; }
.pc-picker-lista .vazio, .pc-prod-lista .vazio { padding: 18px; text-align: center; color: var(--s-txt2); font-size: 13px; }
.pc-add { display: grid; grid-template-columns: minmax(260px, 4fr) minmax(110px, 150px) 90px 110px auto; gap: 10px; align-items: end; border: 1px dashed var(--s-borda); border-radius: 10px; padding: 12px; background: hsl(213 36% 98%); }
.pc-add-prod { position: relative; }
.pc-busca-prod { position: relative; } .pc-busca-prod .ic { position: absolute; left: 12px; top: 12px; width: 16px; height: 16px; color: var(--s-txt2); } .pc-busca-prod input { padding-left: 36px; }
.pc-escolhido { height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid hsl(215 25% 85%); border-radius: 10px; padding: 0 12px; background: var(--s-muted); font-size: 13.5px; font-weight: 600; }
.pc-escolhido span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pc-escolhido small { color: var(--s-txt2); font-weight: 500; }
.pc-escolhido button, .pc-estoque button { color: var(--s-txt2) !important; display: grid !important; } .pc-estoque button { color: var(--s-primary) !important; }
.pc-estoque { height: 40px; display: flex; align-items: center; justify-content: space-between; border: 1px solid hsl(215 25% 85%); border-radius: 10px; padding: 0 12px; background: var(--s-muted); }
.pc-add > .sim-btn { height: 40px; }
.pc-itens td { vertical-align: middle; } .pc-itens small.bloco { display: block; font-size: 11px; }
.pc-num { width: 80px; height: 32px; border: 1px solid hsl(215 25% 85%); border-radius: 8px; padding: 0 8px; text-align: right; font: inherit; font-size: 13px; background: var(--s-card); color: var(--s-txt); } .pc-num.largo { width: 96px; }
.pc-itens td[data-calc^="custo"] small { display: block; font-size: 11px; color: var(--s-txt2); }
.pc-acoes { display: flex; justify-content: flex-end; gap: 4px; }
.pc-acoes button { width: 32px; height: 32px; border-radius: 8px; display: grid !important; place-items: center; color: var(--s-txt2) !important; }
.pc-acoes button:hover { background: var(--s-accent); } .pc-acoes button.on { background: hsl(223 100% 59% / .1); color: var(--s-primary) !important; }
.pc-acoes button.azul { color: var(--s-primary) !important; } .pc-acoes button.verm { color: #dc2626 !important; } .pc-acoes button:disabled { opacity: .3; cursor: default; }
.pc-imp-linha td { background: var(--s-muted); }
.pc-imp p { margin: 0 0 8px; display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--s-txt2); }
.pc-imp-grade { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.pc-imp-grade label { display: grid; gap: 3px; } .pc-imp-grade span { font-size: 11px; color: var(--s-txt2); font-weight: 600; }
.pc-imp-grade input { height: 32px; border: 1px solid hsl(215 25% 85%); border-radius: 8px; padding: 0 8px; font: inherit; font-size: 13px; background: var(--s-card); color: var(--s-txt); }
.pc-imp-calc { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; color: var(--s-txt2); } .pc-imp-calc b { color: var(--s-txt); } .pc-imp-calc b.azul { color: var(--s-primary); }
.pc-rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.pc-totais { display: flex; flex-wrap: wrap; gap: 24px; } .pc-totais small { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--s-txt2); }
.pc-totais b { font-size: 18px; } .pc-totais .destaque b { font-size: 24px; color: var(--s-primary); }
.pc-finalizar { display: flex; align-items: center; gap: 10px; } .pc-erro { display: flex; align-items: center; gap: 4px; color: #dc2626; font-size: 13px; }
.pc-btn-grande { padding: 12px 20px !important; font-size: 15px !important; }
.pc-sucesso { max-width: 560px; margin: 24px auto; display: grid; justify-items: center; gap: 10px; text-align: center; background: var(--s-card); border: 1px solid rgb(22 162 73 / .4); border-radius: 12px; padding: 32px; }
.pc-sucesso-ic { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: rgb(22 162 73 / .15); color: var(--s-verde); } .pc-sucesso-ic .ic { width: 24px; height: 24px; }
.pc-sucesso h2 { margin: 0; font-size: 20px; } .pc-sucesso p { margin: 0; color: var(--s-txt2); font-size: 13.5px; } .pc-sucesso > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding-top: 8px; }
.pc-filtros { grid-template-columns: 120px 2fr 1fr 1.4fr auto auto; align-items: end; }
.pc-filtros .sim-cb { height: 40px; } .pc-filtros > .sim-btn { height: 40px; }
.pc-st { border-radius: 99px; padding: 2px 8px; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.pc-st.aberto { background: hsl(223 100% 59% / .1); color: var(--s-primary); } .pc-st.entr { background: rgb(22 162 73 / .15); color: var(--s-verde); }
.pc-st.fech { background: var(--s-muted); color: var(--s-txt2); } .pc-st.canc { background: rgb(220 38 38 / .15); color: #dc2626; }
.pc-cota { margin-left: 6px; border-radius: 4px; background: hsl(223 100% 59% / .1); color: var(--s-primary); font-size: 10px; font-weight: 700; padding: 1px 4px; }
.pc-paginacao { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-top: 1px solid var(--s-borda); font-size: 13px; color: var(--s-txt2); } .pc-paginacao > div { display: flex; gap: 4px; }
.pc-det { width: min(896px, 100%); } .pc-det h3 .pc-st { margin-left: 4px; }
.pc-det-campos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 24px; font-size: 13px; }
.pc-det-campos small, .pc-det-tot small { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--s-txt2); } .pc-det-campos p, .pc-det-tot p { margin: 0; } .pc-det-campos .cheio { grid-column: 1 / -1; }
.pc-det-tot { display: flex; justify-content: flex-end; gap: 24px; } b.azul { color: var(--s-primary); } .pc-det-tot b.azul { font-size: 18px; }
@media (max-width: 1100px) { .pc-grade4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pc-add { grid-template-columns: minmax(0, 1fr) 1fr; } .pc-add-prod { grid-column: 1 / -1; } .pc-filtros { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pc-imp-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pc-grade4, .pc-grade3, .pc-filtros, .pc-det-campos { grid-template-columns: minmax(0, 1fr); } .pc-f.dois { grid-column: auto; } .pc-imp-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pc-finalizar { width: 100%; } .pc-btn-grande { flex: 1; justify-content: center; } }

/* ===== Estrutura Mercadológica, Setores e Marcas ===== */
.sim .ic.cad-ic { width: 20px; height: 20px; color: var(--s-primary); }
.cad-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cad-busca { height: 36px; border: 1px solid hsl(215 25% 85%); border-radius: 8px; padding: 0 12px; background: var(--s-card); color: var(--s-txt); font: inherit; font-size: 13.5px; width: 260px; max-width: 100%; }
.cad-rotina { border-radius: 4px; background: var(--s-muted); color: var(--s-txt2); font-size: 12px; font-weight: 600; padding: 2px 6px; }
.mc-colunas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.mc-coluna { background: var(--s-card); border: 1px solid var(--s-borda); border-radius: 12px; min-height: 22rem; display: flex; flex-direction: column; overflow: hidden; }
.mc-col-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--s-borda); background: hsl(215 32% 97%); }
.mc-col-topo b { font-size: 13.5px; } .mc-col-topo i { font-style: normal; margin-left: 6px; border-radius: 99px; background: var(--s-muted); padding: 0 6px; font-size: 11px; color: var(--s-txt2); }
.mc-col-topo .sim-btn { height: 28px; padding: 0 8px !important; }
.mc-col-cab { display: flex; gap: 8px; padding: 6px 12px; border-bottom: 1px solid var(--s-borda); font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--s-txt2); } .mc-col-cab span:first-child { width: 64px; }
.mc-coluna ul { list-style: none; margin: 0; padding: 0; flex: 1; overflow-y: auto; }
.mc-coluna li { display: flex; align-items: flex-start; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--s-borda); cursor: pointer; font-size: 13.5px; }
.mc-coluna li:hover { background: var(--s-muted); } .mc-coluna li.on { background: hsl(223 100% 59% / .1); } .mc-coluna li.novo b { color: var(--s-verde); }
.mc-coluna li.vazio { justify-content: center; text-align: center; color: var(--s-txt2); font-size: 12px; padding: 40px 12px; cursor: default; border: 0; } .mc-coluna li.vazio:hover { background: none; }
.mc-coluna .cod { width: 64px; flex: none; font-size: 12px; color: var(--s-txt2); margin-top: 2px; }
.mc-coluna .nome { flex: 1; min-width: 0; } .mc-coluna .nome small { display: flex; align-items: center; gap: 3px; font-size: 11px; color: var(--s-primary); font-weight: 600; margin-top: 2px; } .mc-coluna .nome small .ic { width: 12px; height: 12px; }
.mc-ed { opacity: 0; color: var(--s-txt2) !important; width: 24px; height: 24px; border-radius: 6px; display: grid !important; place-items: center; } .mc-ed .ic { width: 14px; height: 14px; }
.mc-coluna li:hover .mc-ed, .mc-coluna li.on .mc-ed { opacity: 1; } .mc-ed:hover { background: var(--s-borda); }
.mc-qtd { display: flex; align-items: center; gap: 2px; font-size: 11px; color: var(--s-txt2); margin-top: 2px; } .mc-qtd .ic { width: 14px; height: 14px; }
.cad-modal { width: min(448px, 100%); }
.cad-onde { margin: 0; font-size: 12px; color: var(--s-txt2); }
.cad-grade-cod { display: grid; grid-template-columns: 1fr 2fr; gap: 12px; }
.cad-grade2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 12px; border-top: 1px solid var(--s-borda); }
.cad-radios { display: flex; gap: 16px; min-height: 28px; align-items: center; }
.cad-det { border: 1px solid var(--s-borda); border-radius: 8px; } .cad-det > button { width: 100%; display: flex !important; align-items: center; gap: 6px; padding: 8px 12px; font-size: 13px; color: var(--s-txt2) !important; } .cad-det > button .ic { width: 14px; height: 14px; }
.cad-ajuda { font-size: 11px; color: var(--s-txt2); line-height: 1.4; }
.pc-f > span .ic { width: 15px; height: 15px; color: var(--s-primary); vertical-align: -3px; }
.cad-rodape-esq { justify-content: flex-start; gap: 8px; }
.cad-lista { padding: 0; gap: 0; overflow: hidden; } .cad-lista .sim-tabela-wrap { border: 0; border-radius: 0; }
.cad-barra { display: flex; align-items: center; gap: 8px; padding: 12px; border-bottom: 1px solid var(--s-borda); } .cad-total { margin-left: auto; font-size: 12px; color: var(--s-txt2); }
.cad-ord { display: inline-flex !important; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; letter-spacing: .05em; color: var(--s-txt2) !important; } .cad-ord.on { color: var(--s-txt) !important; } .cad-ord.on .ic { color: var(--s-primary); opacity: 1; }
.cad-cod { max-width: 128px; }
.cad-desc-rot { display: flex; justify-content: space-between; } .cad-desc-rot small { font-weight: 500; }
.cad-filtros { flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px; }
.cad-filtros select { height: 36px; border: 1px solid hsl(215 25% 85%); border-radius: 8px; padding: 0 8px; background: var(--s-card); color: var(--s-txt); font: inherit; font-size: 13.5px; }
.cad-checks { display: grid; gap: 8px; border: 1px solid var(--s-borda); border-radius: 8px; padding: 12px; } .cad-checks.borda .pc-f { margin-top: 4px; }
.sim-st.inat { background: var(--s-muted); color: var(--s-txt2); }
@media (max-width: 1100px) { .mc-colunas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .mc-colunas { grid-template-columns: minmax(0, 1fr); } .mc-coluna { min-height: 10rem; } .cad-busca { width: 100%; } .cad-grade-cod, .cad-grade2 { grid-template-columns: minmax(0, 1fr); } }

/* ===== Cefas CRM ===== */
.fn-h { margin: 0; font-size: 20px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.fn-sel { height: 36px; border: 1px solid hsl(215 25% 85%); border-radius: 8px; padding: 0 8px; background: var(--s-card); color: var(--s-txt); font: inherit; font-size: 13px; font-weight: 600; }
.sim-btn.ativo { border-color: var(--s-primary) !important; color: var(--s-primary) !important; }
.fn-filtros { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 12px; } .fn-filtros .dois { grid-column: span 2; } .fn-filtros .cheio { grid-column: 1 / -1; }
.fn-filtros input, .fn-filtros select { height: 36px; }
.fn-quadro { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: flex-start; }
.fn-col { width: 260px; flex: none; border: 1px solid var(--s-borda); border-radius: 10px; background: hsl(215 32% 97%); display: flex; flex-direction: column; max-height: 62vh; }
.fn-col-topo { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--s-borda); font-size: 12.5px; }
.fn-col-topo b { display: flex; align-items: center; gap: 5px; } .fn-col-topo .ic { width: 14px; height: 14px; } .fn-col-topo span { font-size: 11px; color: var(--s-txt2); background: var(--s-card); border-radius: 99px; padding: 0 7px; }
.fn-col-total { padding: 4px 12px; font-size: 11.5px; color: var(--s-txt2); font-weight: 600; }
.fn-cards { padding: 6px 8px 10px; display: grid; gap: 8px; overflow-y: auto; }
.fn-col .vazio { font-size: 12px; text-align: center; color: var(--s-txt2); padding: 14px 4px; margin: 0; }
.fn-card { background: var(--s-card); border: 1px solid var(--s-borda); border-radius: 8px; padding: 9px 10px; display: grid; gap: 3px; cursor: pointer; font-size: 13px; box-shadow: 0 1px 2px rgba(0,0,0,.04); transition: box-shadow .15s, border-color .15s; }
.fn-card:hover { border-color: hsl(223 100% 59% / .5); box-shadow: 0 6px 14px -8px rgba(15,23,42,.35); }
.fn-card.novo { border-color: #86efac; box-shadow: 0 0 0 2px rgb(134 239 172 / .5); }
.fn-card > b { font-size: 13px; line-height: 1.3; } .fn-card > small { color: var(--s-txt2); font-size: 11.5px; }
.fn-card-linha { display: flex; justify-content: space-between; align-items: center; font-size: 12px; } .fn-card-linha > span:first-child { font-weight: 700; }
.fn-card-linha span { display: inline-flex; align-items: center; gap: 3px; color: var(--s-txt2); } .fn-card-linha .ic { width: 12px; height: 12px; }
.fn-card-linha .estourou, .estourou { color: #dc2626 !important; font-weight: 700; }
.fn-vend { display: flex; align-items: center; gap: 3px; } .fn-vend .ic { width: 12px; height: 12px; }
.fn-origem { justify-self: start; border-radius: 99px; background: rgb(245 158 11 / .15); color: #b45309; font-size: 10px; font-weight: 700; padding: 1px 7px; }
.fn-motivo { color: #dc2626 !important; }
.fn-col.ganho { border-color: rgb(16 185 129 / .35); } .fn-col.ganho .fn-col-topo b, .fn-col.ganho .fn-col-total { color: #047857; }
.fn-col.perdido { border-color: rgb(239 68 68 / .35); } .fn-col.perdido .fn-col-topo b, .fn-col.perdido .fn-col-total { color: #b91c1c; }
.cad-grade2.sem-borda { border: 0; padding: 0; }
.fe-modal { width: min(560px, 100%); }
.fe-linha { display: grid; grid-template-columns: 1fr 80px 70px 90px; gap: 8px; align-items: center; } .fe-linha.cab { font-size: 11px; font-weight: 700; color: var(--s-txt2); }
.fe-linha input { height: 32px; border: 1px solid var(--s-borda); border-radius: 6px; padding: 0 8px; font: inherit; font-size: 13px; background: var(--s-muted); min-width: 0; }
.fe-acoes { display: flex; gap: 4px; color: var(--s-txt2); } .fe-acoes .ic { width: 15px; height: 15px; }
.fe-nova { display: grid; grid-template-columns: 1fr 90px auto; gap: 8px; align-items: end; border-top: 1px solid var(--s-borda); padding-top: 12px; }
/* painel do negócio */
.ng-modal { width: min(1080px, 100%); }
.ng-linha1 { display: flex; align-items: center; gap: 8px; margin-top: 4px; } .ng-linha1 b { font-size: 15px; margin: 0 !important; }
.ng-st { border-radius: 99px; padding: 2px 9px; font-size: 11px; font-weight: 700; } .ng-st.ab { background: rgb(14 165 233 / .12); color: #0369a1; } .ng-st.g { background: rgb(16 185 129 / .12); color: #047857; } .ng-st.p { background: rgb(239 68 68 / .12); color: #b91c1c; } .ng-st.c { background: var(--s-muted); color: var(--s-txt2); }
.ng-links { display: flex; gap: 12px; margin-top: 6px; } .ng-links button { display: inline-flex !important; align-items: center; gap: 4px; font-size: 12.5px; color: var(--s-primary) !important; font-weight: 600; } .ng-links .ic { width: 14px; height: 14px; }
.ng-resumo { margin: 8px 0 0; font-size: 13px; }
.ng-acoes { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; border: 1px solid var(--s-borda); border-radius: 10px; padding: 10px 12px; background: hsl(215 32% 98%); }
.ng-acoes .pc-f { min-width: 200px; } .ng-fechar-neg { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-left: auto; }
.ng-btn-ganhou { background: #059669 !important; border-color: #059669 !important; color: #fff !important; }
.ng-perda { display: flex; gap: 6px; } .ng-perda select { height: 36px; border: 1px solid hsl(215 25% 85%); border-radius: 8px; padding: 0 8px; font: inherit; font-size: 13px; background: var(--s-card); color: var(--s-txt); }
.ng-cancelar { font-size: 12px; color: var(--s-txt2) !important; text-decoration: underline; }
.ng-colunas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .ng-col { display: grid; gap: 14px; align-content: start; min-width: 0; }
.ng-sec { border: 1px solid var(--s-borda); border-radius: 10px; padding: 12px; display: grid; gap: 8px; } .ng-sec > p { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .05em; color: var(--s-txt2); }
.ng-sec textarea, .na-linha input, .na-linha select, .nc-envio textarea { border: 1px solid hsl(215 25% 85%); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 13px; background: var(--s-card); color: var(--s-txt); min-width: 0; }
.na-linha { display: flex; gap: 6px; } .na-linha input, .na-linha select { height: 36px; padding: 0 10px; } .na-linha input:not([type]) , .na-linha input[data-sim="na-desc"], .na-linha input[data-sim="nt-nota"] { flex: 1; }
.na-item { display: flex; justify-content: space-between; gap: 8px; align-items: center; border-top: 1px solid var(--s-borda); padding-top: 8px; font-size: 13px; } .na-item small { display: block; color: var(--s-txt2); font-size: 11.5px; }
.nc-abas { display: flex; background: var(--s-muted); border-radius: 8px; padding: 3px; } .nc-abas button { flex: 1; display: flex !important; align-items: center; justify-content: center; gap: 5px; padding: 6px; border-radius: 6px; font-size: 13px; font-weight: 600; color: var(--s-txt2) !important; } .nc-abas button.on { background: var(--s-card); color: var(--s-txt) !important; box-shadow: 0 1px 2px rgba(0,0,0,.08); } .nc-abas .ic { width: 15px; height: 15px; }
.nc-para { font-size: 12.5px; color: var(--s-txt2); } .nc-off { color: #b45309; margin-left: 6px; }
.nc-chat { height: 220px; overflow-y: auto; background: #efeae2 radial-gradient(rgba(0,0,0,.04) 1px, transparent 1px) 0 0 / 14px 14px; border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.nc-chat .vazio { margin: auto; font-size: 12px; color: #667781; }
.nc-msg { max-width: 82%; border-radius: 8px; padding: 6px 9px 3px; font-size: 13px; box-shadow: 0 1px 1px rgba(0,0,0,.08); animation: scWa .35s ease-out; } .nc-msg p { margin: 0; color: #111b21; } .nc-msg small { display: block; text-align: right; font-size: 10px; color: #667781; }
.nc-msg.eu { align-self: flex-end; background: #d9fdd3; } .nc-msg.cli { align-self: flex-start; background: #fff; }
.digitando p { display: flex; gap: 3px; padding: 4px 2px; } .digitando i { width: 7px; height: 7px; border-radius: 50%; background: #8696a0; animation: cnPonto 1s infinite; } .digitando i:nth-child(2) { animation-delay: .15s; } .digitando i:nth-child(3) { animation-delay: .3s; }
@keyframes cnPonto { 50% { opacity: .3; transform: translateY(-2px); } }
.nc-envio { display: flex; gap: 6px; align-items: flex-end; } .nc-envio textarea { flex: 1; resize: none; } .nc-ic { width: 34px; height: 36px; display: grid !important; place-items: center; color: var(--s-txt2) !important; } .nc-enviar { height: 36px; }
.nt-lista { display: grid; gap: 6px; max-height: 220px; overflow-y: auto; } .nt-item { border: 1px solid var(--s-borda); border-radius: 8px; padding: 7px 9px; font-size: 12.5px; } .nt-item > div { display: flex; justify-content: space-between; } .nt-item b { font-size: 11px; text-transform: uppercase; color: var(--s-primary); } .nt-item p { margin: 3px 0 0; } .nt-item small { color: var(--s-txt2); font-size: 11px; }
/* celular do cliente */
.cel-cliente { position: absolute; left: 18px; bottom: 18px; z-index: 35; display: grid; gap: 6px; justify-items: center; animation: scSobe .4s ease-out; }
.cel-rotulo { background: #111827; color: #fff; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 99px; }
.cel-mini { width: 250px; height: 380px; border-width: 6px; border-radius: 24px; } .cel-mini .sc-wa-msg { font-size: 11.5px; }
.sc-wa-msg.recebida { background: #fff; border-radius: 0 10px 10px 10px; align-self: flex-start; margin-bottom: 6px; } .sc-wa-msg.enviada { background: #d9fdd3; border-radius: 10px 0 10px 10px; margin-left: auto; margin-bottom: 6px; }
.sc-wa-chat { display: flex; flex-direction: column; }
/* Meu WhatsApp */
.mw-aviso { display: flex; gap: 8px; align-items: flex-start; margin: 0; border: 1px solid rgb(245 158 11 / .4); background: rgb(245 158 11 / .08); color: #92400e; border-radius: 10px; padding: 10px 12px; font-size: 13px; } .mw-aviso .ic { flex: none; margin-top: 2px; }
.mw-st { display: inline-flex; align-items: center; gap: 6px; border-radius: 99px; background: var(--s-muted); color: var(--s-txt2); font-size: 12px; font-weight: 600; padding: 3px 10px; } .mw-st i { width: 8px; height: 8px; border-radius: 50%; background: #a1a1aa; }
.mw-st.amarelo { background: rgb(245 158 11 / .12); color: #b45309; } .mw-st.amarelo i { background: #f59e0b; } .mw-st.verde { background: rgb(16 185 129 / .12); color: #047857; } .mw-st.verde i { background: #10b981; }
.mw-qr { display: grid; justify-items: center; gap: 10px; text-align: center; font-size: 13px; } .mw-qr-img { padding: 12px; background: #fff; border: 1px solid var(--s-borda); border-radius: 12px; }
.qr { width: 180px; height: 180px; fill: #111827; display: block; }
.mw-ok { display: flex; align-items: center; gap: 10px; color: #047857; font-weight: 600; }
.mw-lista { display: grid; gap: 6px; } .mw-lista > div { display: grid; grid-template-columns: 1fr auto; border: 1px solid var(--s-borda); border-radius: 8px; padding: 8px 12px; font-size: 13px; } .mw-lista small { color: var(--s-txt2); grid-column: 1; } .mw-lista .mw-st { grid-row: 1 / 3; grid-column: 2; align-self: center; } .mw-lista .novo { border-color: #86efac; }
/* dashboard e relatórios */
.pn-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pn-kpi { display: grid !important; gap: 2px; } .pn-kpi small { display: flex; align-items: center; gap: 4px; color: var(--s-txt2); font-size: 12px; } .pn-kpi small .ic { width: 13px; height: 13px; } .pn-kpi b { font-size: 18px; }
.pn-kpi b.verde, b.verde { color: #059669; } .pn-kpi b.vermelho, b.vermelho { color: #dc2626; }
.pn-mes { display: flex; gap: 6px; align-items: center; } .pn-mes input { width: 64px; height: 32px; border: 1px solid var(--s-borda); border-radius: 6px; padding: 0 8px; font: inherit; font-size: 13px; background: var(--s-muted); }
.rl-abas { margin-top: 2px; } .rl-conteudo { display: grid; gap: 14px; }
.rl-barra { display: grid; grid-template-columns: 170px 1fr auto; gap: 10px; align-items: center; font-size: 12.5px; } .rl-barra i { height: 10px; border-radius: 99px; background: var(--s-primary); width: var(--w); max-width: 100%; } .rl-barra i.verde { background: #10b981; } .rl-barra i.verm { background: #ef4444; } .rl-barra b { font-size: 12px; }
.rl-anel { --p: 0; width: 120px; height: 120px; border-radius: 50%; margin: 10px auto; display: grid; place-content: center; text-align: center; background: radial-gradient(closest-side, var(--s-card) 76%, transparent 77%), conic-gradient(#10b981 calc(var(--p) * 1%), var(--s-muted) 0); } .rl-anel b { font-size: 22px; } .rl-anel small { color: var(--s-txt2); font-size: 11px; }
.rl-funil { width: var(--w); margin: 0 auto 6px; display: flex; justify-content: space-between; gap: 10px; background: hsl(223 100% 59% / .12); border-left: 4px solid var(--s-primary); border-radius: 6px; padding: 8px 12px; font-size: 13px; } .rl-funil.verde { background: rgb(16 185 129 / .12); border-color: #10b981; }
.rl-evol { display: flex; gap: 14px; height: 230px; padding: 10px 6px 4px; } .rl-col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; } .rl-col b { font-size: 11.5px; white-space: nowrap; } .rl-trilho { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; border-bottom: 1px solid var(--s-borda, #e2e8f0); } .rl-trilho i { width: min(56px, 70%); background: linear-gradient(180deg, var(--s-primary), #6366f1); border-radius: 6px 6px 0 0; animation: rlCresce .6s ease-out; transform-origin: bottom; } .rl-col.atual .rl-trilho i { background: linear-gradient(180deg, #22c55e, #16a34a); } @keyframes rlCresce { from { transform: scaleY(0); } } .rl-col small { font-size: 11px; color: var(--s-txt2); text-transform: capitalize; } .rl-col em { font-style: normal; font-size: 10.5px; color: var(--s-txt2); } @media (max-width: 640px) { .rl-evol { gap: 6px; } .rl-col b { font-size: 9px; } }
.at2-filtros { flex-wrap: wrap; } .at2-filtros .pc-campo-btn { height: 36px; flex: 0 1 auto; }
/* configurações */
.cfg-abas { flex-wrap: wrap; } .cfg-subs { display: inline-flex; border: 1px solid var(--s-borda); border-radius: 8px; overflow: hidden; } .cfg-subs button { padding: 7px 14px; font-size: 13px; font-weight: 600; color: var(--s-txt2) !important; } .cfg-subs button + button { border-left: 1px solid var(--s-borda) !important; } .cfg-subs button.on { background: var(--s-primary) !important; color: #fff !important; }
.cfg-tg { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; } .cfg-tg small { display: block; color: var(--s-txt2); font-size: 11.5px; margin-top: 2px; }
.cfg-switch { width: 38px; height: 22px; flex: none; border-radius: 99px; background: hsl(215 20% 80%) !important; position: relative; transition: background .2s; } .cfg-switch i { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 2px rgba(0,0,0,.2); } .cfg-switch.on { background: var(--s-primary) !important; } .cfg-switch.on i { transform: translateX(16px); }
.cfg-botoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cfg-novo-q { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: end; }
.cfg-lista { display: grid; gap: 6px; } .cfg-lista > div { display: flex; align-items: center; gap: 10px; border: 1px solid var(--s-borda); border-radius: 8px; padding: 7px 10px; font-size: 13px; } .cfg-lista > div b { flex: 1; } .cfg-lista small { color: var(--s-txt2); } .cfg-lista .novo { border-color: #86efac; } .cfg-lista .apagado { opacity: .55; } .cfg-cod { width: 40px; color: var(--s-txt2); font-size: 12px; }
.cfg-meio { max-width: 380px; } .cfg-checks { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.cfg-perms { display: grid; gap: 8px; } .cfg-perm { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--s-borda); border-radius: 8px; padding: 9px 12px; font-size: 13px; } .cfg-perm small { display: block; color: var(--s-txt2); font-size: 11.5px; } .cfg-grupo { text-transform: uppercase; font-weight: 700; letter-spacing: .05em; font-size: 10px !important; } .cfg-off { color: #b45309 !important; }
.cfg-escopo { display: inline-flex; border: 1px solid var(--s-borda); border-radius: 8px; overflow: hidden; flex: none; } .cfg-escopo button { padding: 5px 10px; font-size: 12px; font-weight: 600; color: var(--s-txt2) !important; } .cfg-escopo button + button { border-left: 1px solid var(--s-borda) !important; } .cfg-escopo button.on { background: var(--s-primary) !important; color: #fff !important; }
.cfg-url { display: block; background: var(--s-muted); border-radius: 8px; padding: 8px 10px; font-size: 12.5px; color: var(--s-txt); word-break: break-all; }
.cfg-modos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .cfg-modo { border: 1px solid var(--s-borda); border-radius: 10px; padding: 12px; display: grid; gap: 4px; font-size: 13px; } .cfg-modo small { color: var(--s-txt2); } .cfg-modo.on { border-color: var(--s-primary); box-shadow: 0 0 0 1px var(--s-primary); }
/* cenas animadas */
.cn-fundo { position: absolute; inset: 0; z-index: 45; background: rgba(15, 23, 42, .78); display: grid; place-items: center; padding: 16px; animation: entraCena .3s ease-out; }
@keyframes entraCena { from { opacity: 0; } }
.cn-palco { width: min(860px, 100%); display: grid; justify-items: center; gap: 16px; color: #fff; text-align: center; }
.cn-titulo { font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #a5b4fc; }
.cn-legenda { margin: 0; font-size: clamp(15px, 2vw, 19px); font-weight: 600; max-width: 640px; animation: scSobe .5s ease-out; }
.cn-lado { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px; }
.cn-tela { background: #fff; border-radius: 12px; padding: 14px; display: grid; gap: 6px; justify-items: center; color: #111827; box-shadow: 0 20px 40px rgba(0,0,0,.4); } .cn-tela .qr { width: 150px; height: 150px; } .cn-tela small { font-size: 11px; color: #64748b; }
.cn-seta { font-size: 28px; min-width: 40px; animation: cnPisca 1s infinite; } @keyframes cnPisca { 50% { opacity: .4; } }
.cn-cel { width: 230px; height: 360px; } .cn-cel.grande { width: 280px; height: 440px; }
.cn-menu { flex: 1; background: #fff; color: #111b21; padding: 14px; display: grid; align-content: start; gap: 8px; text-align: left; font-size: 13px; } .cn-menu b { font-size: 16px; color: #008069; } .cn-menu p { margin: 0; padding: 8px; border-radius: 8px; } .cn-menu p.on { background: #d9fdd3; font-weight: 700; animation: cnPisca 1s infinite; } .cn-menu.ok b { color: #047857; } .cn-menu small { color: #667781; }
.cn-camera { flex: 1; background: #111827; display: grid; place-items: center; gap: 10px; color: #fff; font-size: 12px; padding: 10px; } .cn-mira { width: 130px; height: 130px; border: 3px solid #22c55e; border-radius: 14px; animation: cnMira 1.2s infinite; } @keyframes cnMira { 50% { transform: scale(.9); } }
.cn-navegador { width: min(560px, 100%); background: #fff; color: #111827; border-radius: 12px; overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,.4); text-align: left; }
.cn-barra { display: flex; align-items: center; gap: 6px; background: #e5e7eb; padding: 8px 10px; font-size: 12px; color: #475569; } .cn-barra i { width: 10px; height: 10px; border-radius: 50%; background: #f87171; } .cn-barra i:nth-child(2) { background: #fbbf24; } .cn-barra i:nth-child(3) { background: #34d399; } .cn-barra span { margin-left: 8px; background: #fff; border-radius: 99px; padding: 3px 10px; flex: 1; }
.cn-form { padding: 18px 22px; display: grid; gap: 10px; } .cn-form h3 { margin: 0; color: #2563eb; } .cn-form label { display: grid; gap: 3px; font-size: 12px; font-weight: 600; color: #475569; } .cn-form label span { min-height: 34px; border: 1px solid #cbd5e1; border-radius: 8px; padding: 7px 10px; font-size: 14px; font-weight: 500; color: #111827; }
.cn-form button { justify-self: start; background: #2563eb; color: #fff !important; border-radius: 8px; padding: 8px 18px; font-weight: 700; } .cn-form.ok { text-align: center; padding: 40px 20px; } .cn-form.ok h3 { color: #059669; }
.cn-erp { background: #f8fafc; color: #111827; border-radius: 10px; width: 250px; overflow: hidden; text-align: left; box-shadow: 0 20px 40px rgba(0,0,0,.4); } .cn-erp-topo { background: #1e293b; color: #fff; font-weight: 700; padding: 8px 12px; font-size: 13px; } .cn-erp p { margin: 12px; font-size: 14px; } .cn-erp small { display: block; margin: 0 12px 12px; color: #64748b; font-size: 12px; }
.cn-mini-funil, .cn-kanban { display: flex; gap: 8px; } .cn-mini-funil > div, .cn-kanban > div { width: 120px; min-height: 120px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); border-radius: 10px; padding: 8px 6px; display: grid; align-content: start; gap: 6px; } .cn-kanban > div { width: clamp(84px, 12vw, 120px); }
.cn-mini-funil small, .cn-kanban small { font-size: 10px; font-weight: 700; color: #cbd5e1; } .cn-mini-funil .g small, .cn-kanban .g small { color: #6ee7b7; } .cn-mini-funil .p small { color: #fca5a5; } .cn-mini-funil .on { border-color: #fbbf24; }
.cn-card { background: #fff; color: #111827; border-radius: 7px; padding: 6px; font-size: 10.5px; font-weight: 700; line-height: 1.3; animation: cnCard .6s ease-out; box-shadow: 0 6px 14px rgba(0,0,0,.3); } .cn-card.fantasma { opacity: .55; animation: none; } @keyframes cnCard { from { opacity: 0; transform: translateX(-30px) scale(.9); } }
.cn-nps { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 6px; background: #fff; border-radius: 10px; } .cn-nps span { width: 22px; height: 26px; display: grid; place-items: center; border-radius: 5px; font-size: 12px; font-weight: 700; color: #fff; } .cn-nps .det { background: #f87171; } .cn-nps .neu { background: #fbbf24; } .cn-nps .pro { background: #34d399; } .cn-nps .on { outline: 3px solid #1d4ed8; transform: scale(1.25); }
@media (max-width: 900px) { .pn-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ng-colunas { grid-template-columns: minmax(0, 1fr); } .fn-filtros { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cel-cliente { left: 8px; bottom: 8px; transform: scale(.8); transform-origin: bottom left; } .rl-barra { grid-template-columns: 110px 1fr auto; } .cfg-novo-q, .cfg-modos { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .pn-kpis, .fn-filtros { grid-template-columns: minmax(0, 1fr); } .fn-filtros .dois { grid-column: auto; } .ng-fechar-neg { margin-left: 0; } .cn-kanban { flex-wrap: wrap; justify-content: center; } }

/* ===== Cena: WhatsApp no celular lendo o QR (Meu WhatsApp) ===== */
.zp-lado { gap: 34px; align-items: center; }
.zp-pc { position: relative; padding: 0 0 12px; overflow: hidden; transition: box-shadow .4s; }
.zp-pc .qr { width: 170px; height: 170px; margin: 12px 18px 0; transition: filter .4s; }
.zp-pc-barra { width: 100%; display: flex; align-items: center; gap: 4px; padding: 6px 8px; background: #e2e8f0; font-size: 10px; color: #475569; }
.zp-pc-barra i { width: 7px; height: 7px; border-radius: 50%; background: #94a3b8; } .zp-pc-barra span { margin-left: 6px; }
.zp-pc.mirado { box-shadow: 0 0 0 4px #22c55e, 0 20px 40px rgba(0,0,0,.4); }
.zp-pc.lido .qr { filter: opacity(.35); }
.zp-pc.lido small { color: #047857; font-weight: 700; }
.zp-cel { width: 250px; height: 440px; position: relative; background: #fff; color: #111b21; text-align: left; font-size: 12px; transition: transform 1.2s ease-in-out; }
.zp-cel.mirando { animation: zpMira 1.4s ease-in-out forwards; } @keyframes zpMira { to { transform: translateX(-26px) rotate(-6deg) scale(1.03); } }
.zp-topo { display: flex; align-items: center; gap: 8px; padding: 12px 10px 8px; }
.zp-topo b { flex: 1; font-size: 19px; color: #008069; } .zp-topo b.zp-tit { font-size: 15px; color: #111b21; }
.sim .zp-ic { width: 30px; height: 30px; display: grid; place-items: center; border: 0; background: none; border-radius: 50%; font-size: 20px; font-weight: 900; color: #54656f; cursor: pointer; } .zp-ic svg { width: 18px; height: 18px; }
.zp-busca { margin: 0 10px 6px; padding: 8px 10px; border-radius: 20px; background: #f0f2f5; color: #667781; font-size: 11px; display: flex; gap: 6px; align-items: center; } .zp-busca svg { width: 13px; height: 13px; }
.zp-lista { flex: 1; overflow: hidden; }
.zp-conv { display: flex; align-items: center; gap: 9px; padding: 8px 10px; } .zp-conv div { flex: 1; min-width: 0; display: grid; } .zp-conv b { font-size: 12.5px; } .zp-conv small { color: #667781; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .zp-conv time { font-size: 10px; color: #667781; align-self: start; }
.zp-av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #dfe5e7; color: #54656f; font-weight: 800; font-size: 11px; flex: none; } .zp-av.pc { background: #d9fdd3; color: #008069; } .zp-av svg { width: 18px; height: 18px; }
.zp-abas { display: flex; justify-content: space-around; border-top: 1px solid #e9edef; padding: 8px 4px; font-size: 9.5px; color: #54656f; } .zp-abas .on { font-weight: 800; color: #111b21; }
.zp-dropdown { position: absolute; top: 40px; right: 8px; width: 170px; background: #fff; border-radius: 10px; box-shadow: 0 8px 26px rgba(0,0,0,.28); padding: 6px 0; animation: zpAbre .2s ease-out; z-index: 2; }
.zp-dropdown p, .sim .zp-dropdown button { margin: 0; padding: 9px 14px; font-size: 12.5px; display: block; width: 100%; text-align: left; border: 0; background: none; color: #111b21; font-family: inherit; }
.sim .zp-dropdown button { cursor: pointer; font-weight: 700; background: #e7fce3; }
@keyframes zpAbre { from { opacity: 0; transform: scale(.85); transform-origin: top right; } }
.zp-aparelhos { flex: 1; display: grid; align-content: start; justify-items: center; gap: 10px; padding: 8px 14px; text-align: center; color: #54656f; }
.zp-aparelhos p { margin: 0; font-size: 11.5px; }
.zp-ilustra { display: flex; gap: 6px; align-items: end; color: #25d366; margin-top: 6px; } .zp-ilustra svg { width: 54px; height: 54px; } .zp-ilustra svg + svg { width: 30px; height: 30px; }
.sim .zp-verde { width: 100%; padding: 10px; border: 0; border-radius: 22px; background: #008069; color: #fff; font-weight: 700; font-size: 12.5px; cursor: pointer; font-family: inherit; }
.zp-status { width: 100%; text-align: left; display: grid; gap: 8px; border-top: 1px solid #e9edef; padding-top: 10px; } .zp-status > small { font-size: 9.5px; letter-spacing: .06em; font-weight: 700; }
.zp-dispo { display: flex; gap: 9px; align-items: center; } .zp-dispo div { display: grid; } .zp-dispo b { color: #111b21; } .zp-dispo .verde { color: #008069; font-weight: 700; }
.zp-dispo.novo { animation: scSobe .5s ease-out; }
.zp-toast { justify-self: center; margin: 6px 0 0 !important; padding: 6px 12px; border-radius: 16px; background: #111b21; color: #fff; display: flex; gap: 5px; align-items: center; animation: scSobe .5s ease-out; } .zp-toast svg { width: 14px; height: 14px; color: #25d366; }
.zp-cam { flex: 1; background: #0b141a; color: #e9edef; display: grid; grid-template-rows: auto 1fr auto; justify-items: center; align-items: center; padding: 10px 10px 18px; text-align: center; }
.zp-cam-topo { width: 100%; display: flex; gap: 8px; align-items: center; font-size: 13px; } .zp-cam-topo svg { width: 16px; height: 16px; }
.zp-visor { position: relative; width: 180px; height: 180px; display: grid; place-items: center; overflow: hidden; }
.zp-visor-qr { padding: 10px; background: #f8fafc; border-radius: 6px; transform: scale(.55) rotate(4deg); filter: blur(2px); opacity: .5; transition: transform 1.4s ease-in-out, filter 1.4s, opacity 1.4s; } .zp-visor-qr .qr { width: 150px; height: 150px; display: block; }
.zp-visor.lendo .zp-visor-qr { animation: zpFoca 2s ease-in-out .3s forwards; } @keyframes zpFoca { to { transform: scale(.92) rotate(0); filter: none; opacity: 1; } }
.zp-visor s { position: absolute; width: 30px; height: 30px; border: 4px solid #25d366; }
.zp-visor s:nth-of-type(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; border-radius: 10px 0 0 0; }
.zp-visor s:nth-of-type(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; border-radius: 0 10px 0 0; }
.zp-visor s:nth-of-type(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 10px; }
.zp-visor s:nth-of-type(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; border-radius: 0 0 10px 0; }
.zp-laser { position: absolute; left: 8px; right: 8px; height: 3px; background: #25d366; box-shadow: 0 0 12px 3px rgba(37,211,102,.7); top: 10%; animation: zpLaser 1.6s ease-in-out infinite alternate; }
@keyframes zpLaser { to { top: 88%; } }
.zp-cam small { font-size: 11px; color: #aebac1; }
.zp-spin { width: 48px; height: 48px; border-radius: 50%; border: 5px solid #1f2c33; border-top-color: #25d366; animation: zpGira .8s linear infinite; } @keyframes zpGira { to { transform: rotate(360deg); } }
.zp-toque { position: relative; }
.zp-toque::after { content: ''; position: absolute; inset: -4px; border-radius: inherit; border: 3px solid #f59e0b; animation: zpToque 1.1s ease-out infinite; pointer-events: none; }
.zp-mais.zp-toque::after { border-radius: 50%; }
@keyframes zpToque { 0% { opacity: 1; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.35); } }
@media (max-width: 640px) { .zp-lado { gap: 12px; } .zp-pc .qr { width: 110px; height: 110px; } .zp-cel { width: 220px; height: 400px; } .zp-cel.mirando { animation-name: zpMiraP; } @keyframes zpMiraP { to { transform: translateY(-14px) scale(1.02); } } }
.cn-fundo.continua { animation: none; }
/* redesenho rápido (digitação simulada): nada "entra" de novo; mensagens antigas nunca reanimam */
.sim-quieto .sim-modal, .sim-quieto .cel-cliente, .sim-quieto .cn-fundo, .sim-quieto .cn-legenda, .sim-quieto .digitando { animation: none; }
.nc-msg:not(:last-child), .sc-wa-msg:not(:last-child) { animation: none; }

/* ===== Cena "O que é um CRM?" (bonecos animados) ===== */
.oq-palco { width: min(940px, 100%); gap: 12px; }
.oq-palco.oq-entra .oq-quadro { animation: entraCena .4s ease-out; }
.oq-quadro { position: relative; width: 100%; min-height: 330px; border-radius: 22px; padding: 18px 16px 24px; display: grid; place-items: center; align-content: center; gap: 4px; overflow: hidden;
  background: linear-gradient(180deg, #e0f2fe 0%, #f0f9ff 62%, #dbeafe 62.2%, #bfdbfe 100%); color: #0f172a; box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.oq-legenda { min-height: 2.6em; }
.oq-pontos { display: flex; gap: 6px; } .oq-pontos i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.3); transition: background .3s; } .oq-pontos i.on { background: #a5b4fc; }
.oq-cena-atores { width: 100%; display: flex; justify-content: space-around; align-items: flex-end; gap: 10px; }
.oq-ator { display: grid; justify-items: center; gap: 2px; width: 200px; transition: opacity .4s, filter .4s; }
.oq-ator.apagado { opacity: .45; filter: grayscale(.6); }
.oq-ator > b { font-size: 14px; } .oq-ator > small { font-size: 11px; color: #475569; text-transform: uppercase; letter-spacing: .06em; }
.oq-balao-lugar { min-height: 92px; display: flex; align-items: flex-end; justify-content: center; width: 230px; }
.oq-balao { position: relative; background: #fff; color: #0f172a; border-radius: 16px; padding: 10px 13px; font-size: 14px; font-weight: 600; line-height: 1.3; box-shadow: 0 6px 18px rgba(15,23,42,.18); margin-bottom: 12px; }
.oq-balao::after { content: ''; position: absolute; left: 50%; bottom: -10px; margin-left: -10px; border: 10px solid transparent; border-top-color: #fff; border-bottom: 0; }
.oq-balao.nova { animation: oqBalao .45s cubic-bezier(.2,1.4,.4,1); }
@keyframes oqBalao { from { opacity: 0; transform: scale(.4) translateY(20px); } }
.oq-corpo { position: relative; }
.oq-boneco { width: 120px; height: 170px; display: block; animation: oqRespira 3.2s ease-in-out infinite; transform-origin: bottom center; }
@keyframes oqRespira { 50% { transform: translateY(-3px) scaleY(1.015); } }
.oq-boneco.falando { animation: oqFala .5s ease-in-out infinite; }
@keyframes oqFala { 50% { transform: translateY(-4px) rotate(-1.5deg); } }
.oq-olhos { animation: oqPisca 4s infinite; transform-origin: 60px 62px; transform-box: view-box; }
@keyframes oqPisca { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
.oq-boca-fala { animation: oqBoca .22s ease-in-out infinite alternate; transform-origin: 60px 84px; transform-box: view-box; }
@keyframes oqBoca { from { transform: scaleY(.25); } to { transform: scaleY(1.1); } }
.oq-boneco.h-bravo { filter: drop-shadow(0 0 6px rgba(239,68,68,.45)); }
.oq-obj { position: absolute; font-size: 34px; } .oq-obj.mao { right: -6px; bottom: 34px; animation: oqVibra 1.2s ease-in-out infinite; } .oq-obj.praia { right: -34px; top: 36px; font-size: 40px; }
@keyframes oqVibra { 0%, 70%, 100% { transform: rotate(0); } 75% { transform: rotate(-12deg); } 85% { transform: rotate(12deg); } }
.oq-papeis { position: absolute; inset: 0 0 30px; pointer-events: none; }
.oq-papeis span { position: absolute; font-size: 26px; animation: oqVoa 3.4s ease-in-out infinite; animation-delay: calc(var(--i) * -.6s); }
@keyframes oqVoa { 50% { transform: translateY(-14px) rotate(14deg); } }
.oq-carimbo { justify-self: center; margin-top: 4px; padding: 6px 14px; border: 4px solid; border-radius: 10px; font-weight: 900; font-size: 18px; letter-spacing: .04em; transform: rotate(-8deg); background: rgba(255,255,255,.85); }
.oq-carimbo.vermelho { color: #dc2626; } .oq-carimbo.laranja { color: #c2410c; font-size: 14px; max-width: 260px; } .oq-carimbo.verde { color: #15803d; }
.oq-carimbo.nova { animation: oqCarimbo .5s cubic-bezier(.2,1.6,.4,1); } @keyframes oqCarimbo { from { opacity: 0; transform: rotate(-8deg) scale(2.4); } }
:where(.oq-quadro) .nova { animation: scSobe .5s ease-out; }
/* cena 1: a sigla */
.oq-sigla { display: flex; gap: clamp(14px, 4vw, 48px); justify-content: center; }
.oq-letra { display: grid; justify-items: center; gap: 4px; min-width: 120px; }
.oq-letra span { font-size: clamp(64px, 11vw, 110px); font-weight: 900; line-height: 1; background: linear-gradient(180deg, #2563eb, #7c3aed); -webkit-background-clip: text; background-clip: text; color: transparent; animation: oqLetra .6s cubic-bezier(.2,1.5,.4,1) both; animation-delay: calc(var(--i) * .2s); }
@keyframes oqLetra { from { opacity: 0; transform: translateY(-40px) scale(.5); } }
.oq-letra small { font-size: 15px; font-weight: 800; color: #1e3a8a; } .oq-letra em { font-style: normal; font-size: 14px; font-weight: 700; color: #7c3aed; background: #ede9fe; border-radius: 99px; padding: 2px 10px; }
.oq-elo { display: flex; align-items: center; gap: 10px; margin-top: 10px; } .oq-elo .oq-boneco { width: 70px; height: 100px; }
.oq-elo-linha { width: 140px; height: 4px; background: repeating-linear-gradient(90deg, #db2777 0 10px, transparent 10px 18px); position: relative; animation: oqTraco 1s linear infinite; } .oq-elo-linha i { position: absolute; left: 50%; top: -16px; margin-left: -10px; font-style: normal; font-size: 22px; color: #db2777; animation: oqBate 1s ease-in-out infinite; }
@keyframes oqTraco { to { background-position: 18px 0; } } @keyframes oqBate { 50% { transform: scale(1.3); } }
.oq-loja { font-size: 54px; display: grid; justify-items: center; } .oq-loja small { font-size: 12px; font-weight: 700; color: #334155; }
/* cena 5: a ficha */
.oq-ficha { width: min(520px, 100%); background: #fff; border-radius: 16px; box-shadow: 0 10px 30px rgba(15,23,42,.18); padding: 12px 14px; display: grid; gap: 8px; text-align: left; }
.oq-ficha-topo { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #e2e8f0; padding-bottom: 6px; } .oq-ficha-topo .oq-boneco { width: 48px; height: 68px; animation: none; } .oq-ficha-topo div { display: grid; } .oq-ficha-topo small { color: #64748b; }
.oq-item { display: flex; gap: 10px; align-items: center; background: #f1f5f9; border-radius: 10px; padding: 7px 10px; } .oq-item > span { font-size: 22px; } .oq-item div { display: grid; } .oq-item b { font-size: 13px; } .oq-item small { font-size: 12px; color: #475569; }
.oq-item.nova { animation: oqEntraItem .55s cubic-bezier(.2,1.3,.4,1); } @keyframes oqEntraItem { from { opacity: 0; transform: translateX(120px) scale(.8); } }
.oq-equipe { display: flex; align-items: center; justify-content: center; gap: 12px; background: #ecfdf5; border-radius: 10px; padding: 4px 8px; } .oq-equipe > div { display: grid; justify-items: center; } .oq-equipe .oq-boneco { width: 40px; height: 56px; } .oq-equipe small { font-size: 10px; } .oq-equipe p { margin: 0; font-weight: 700; color: #047857; font-size: 13px; }
/* cena 6: tela do CRM */
.oq-pc { position: absolute; left: -175px; bottom: 20px; width: 170px; background: #fff; border-radius: 10px; box-shadow: 0 8px 22px rgba(15,23,42,.25); overflow: hidden; text-align: left; }
.oq-pc-topo { display: flex; gap: 3px; align-items: center; background: #1e293b; padding: 5px 7px; } .oq-pc-topo i { width: 6px; height: 6px; border-radius: 50%; background: #64748b; } .oq-pc-topo span { margin-left: 5px; font-size: 10px; color: #cbd5e1; font-weight: 700; }
.oq-pc-corpo { padding: 8px; display: grid; gap: 6px; min-height: 92px; } .oq-vazio { margin: 0; font-size: 11px; color: #94a3b8; }
.oq-card { border-left: 4px solid #2563eb; background: #eff6ff; border-radius: 6px; padding: 5px 7px; display: grid; } .oq-card small { font-size: 9px; font-weight: 800; color: #2563eb; } .oq-card b { font-size: 12px; } .oq-card span { font-size: 10px; color: #475569; }
.oq-card.ganho { border-color: #16a34a; background: #f0fdf4; } .oq-card.ganho small { color: #16a34a; }
.oq-lembrete { font-size: 10.5px; background: #fef3c7; border: 1px solid #f59e0b; border-radius: 6px; padding: 5px 6px; animation: oqVibra 1s ease-in-out 2; }
/* cena 7: ficha e painel */
.oq-mini-ficha, .oq-painel { position: absolute; bottom: 24px; width: 160px; background: #fff; border-radius: 10px; padding: 7px 9px; box-shadow: 0 8px 22px rgba(15,23,42,.25); display: grid; gap: 2px; text-align: left; }
.oq-mini-ficha { left: -96px; bottom: 6px; width: 150px; } .oq-painel { left: -150px; }
.oq-mini-ficha small, .oq-painel small { font-size: 9px; font-weight: 800; color: #2563eb; } .oq-mini-ficha b, .oq-painel b { font-size: 11.5px; } .oq-mini-ficha span { font-size: 10px; color: #475569; }
.oq-painel strong { font-size: 18px; color: #15803d; } .oq-barras { display: flex; gap: 4px; align-items: flex-end; height: 34px; } .oq-barras i { flex: 1; height: var(--h); background: linear-gradient(180deg, #60a5fa, #2563eb); border-radius: 3px 3px 0 0; animation: rlCresce .7s ease-out; transform-origin: bottom; }
/* cena 8: benefícios */
.oq-beneficios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: min(680px, 100%); }
.oq-beneficios > div { background: #fff; border-radius: 14px; padding: 12px 14px; display: grid; gap: 3px; text-align: left; box-shadow: 0 6px 18px rgba(15,23,42,.14); min-height: 104px; } .oq-beneficios > div.vazio { background: rgba(255,255,255,.35); box-shadow: none; }
.oq-beneficios span { font-size: 28px; } .oq-beneficios b { font-size: 15px; } .oq-beneficios small { font-size: 12.5px; color: #475569; }
.oq-beneficios > div.nova { animation: oqBalao .5s cubic-bezier(.2,1.4,.4,1); }
/* cena 9: integração */
.oq-integra { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.oq-bloco { width: 170px; background: #fff; border-radius: 14px; padding: 14px 10px; display: grid; justify-items: center; gap: 3px; font-size: 34px; box-shadow: 0 6px 18px rgba(15,23,42,.14); } .oq-bloco b { font-size: 15px; } .oq-bloco small { font-size: 11px; color: #64748b; text-align: center; }
.oq-bloco.crm { outline: 3px solid #7c3aed; }
.oq-seta { width: 70px; height: 4px; background: #cbd5e1; border-radius: 2px; position: relative; } .oq-seta.on { background: #7c3aed; }
.oq-seta i { position: absolute; top: -16px; left: 0; font-style: normal; font-size: 24px; animation: oqViaja 1.6s ease-in-out infinite; } @keyframes oqViaja { from { left: -10px; } to { left: 56px; } }
@media (max-width: 760px) {
  .oq-quadro { min-height: 300px; padding: 12px 6px; } .oq-ator { width: 120px; } .oq-balao-lugar { width: 140px; min-height: 104px; } .oq-balao { font-size: 12px; padding: 8px 9px; }
  .oq-boneco { width: 84px; height: 119px; } .oq-pc { position: static; width: 150px; margin-top: 6px; } .oq-mini-ficha, .oq-painel { position: static; width: 130px; margin-top: 6px; }
  .oq-carimbo { font-size: 13px; } .oq-letra { min-width: 80px; } .oq-beneficios { grid-template-columns: minmax(0, 1fr); } .oq-beneficios > div { min-height: 0; }
}
.oq-carimbo.vazio { visibility: hidden; }
@media (max-width: 760px) { .cn-fundo { overflow-y: auto; place-items: start center; padding: 10px 8px 24px; } }
.sim-cena-solta { display: contents; }

/* ===== Histórias animadas (sim-historias.js) ===== */
.hs-roda { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.hs-centro { order: 3; width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #2563eb, #7c3aed); color: #fff; font-weight: 900; box-shadow: 0 0 0 8px rgba(124,58,237,.15); animation: oqBate 1.6s ease-in-out infinite; }
.hs-raio { order: var(--o); width: 82px; background: #fff; border-radius: 12px; padding: 6px 4px; display: grid; justify-items: center; font-size: 22px; box-shadow: 0 4px 12px rgba(15,23,42,.12); animation: scSobe .5s ease-out both; animation-delay: calc(var(--i) * .15s); }
.hs-raio small { font-size: 11px; font-weight: 700; color: #1e3a8a; }
.hs-plan { right: -30px; bottom: 6px; font-size: 12px; animation: none; }
.hs-planilha { display: grid; background: #fff; border: 1px solid #16a34a; border-top: 6px solid #16a34a; border-radius: 6px; padding: 3px 7px; box-shadow: 0 4px 10px rgba(0,0,0,.15); text-align: left; } .hs-planilha small { font-size: 9px; color: #15803d; } .hs-planilha b { font-size: 14px; color: #0f172a; }
.hs-fluxo { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0; row-gap: 12px; }
.hs-no { width: 118px; min-height: 104px; background: rgba(255,255,255,.55); border: 2px dashed #94a3b8; border-radius: 14px; padding: 8px; display: grid; justify-items: center; align-content: center; gap: 2px; text-align: center; color: #64748b; transition: all .3s; }
.hs-no span { font-size: 28px; filter: grayscale(1); opacity: .5; } .hs-no b { font-size: 13px; } .hs-no small { font-size: 11px; }
.hs-no.on { background: #fff; border: 2px solid #2563eb; color: #0f172a; box-shadow: 0 8px 20px rgba(37,99,235,.2); } .hs-no.on span { filter: none; opacity: 1; }
.hs-no.nova { animation: oqBalao .5s cubic-bezier(.2,1.4,.4,1); }
.hs-liga { width: 28px; height: 4px; background: #cbd5e1; } .hs-liga.on { background: linear-gradient(90deg, #2563eb, #7c3aed); }
.hs-hub { display: grid; justify-items: center; gap: 14px; }
.hs-hub-logo { display: grid; justify-items: center; gap: 2px; font-size: 44px; font-weight: 900; width: 84px; height: 84px; place-content: center; border-radius: 22px; background: linear-gradient(135deg, #2563eb, #7c3aed); color: #fff; position: relative; margin-bottom: 40px; }
.hs-hub-logo b { position: absolute; top: 92px; font-size: 20px; color: #0f172a; white-space: nowrap; } .hs-hub-logo small { position: absolute; top: 120px; font-size: 12px; font-weight: 600; color: #475569; white-space: nowrap; }
.hs-aparelhos { display: flex; gap: 24px; font-size: 44px; margin-top: 10px; } .hs-aparelhos span { animation: oqRespira 2.4s ease-in-out infinite; }
.hs-login { display: flex; gap: 10px; } .hs-login span { background: #fff; border: 1px solid #cbd5e1; border-radius: 8px; padding: 6px 12px; font-size: 13px; font-weight: 600; }
.hs-deposito { display: grid; grid-template-columns: repeat(4, 34px); gap: 2px; justify-items: center; align-self: center; position: relative; } .hs-deposito span { font-size: 28px; animation: scSobe .4s ease-out both; animation-delay: calc(var(--i) * .06s); }
.hs-deposito b { grid-column: 1 / -1; margin-top: 6px; background: #fff7ed; color: #c2410c; border: 2px solid #fb923c; border-radius: 8px; padding: 3px 8px; font-size: 13px; white-space: nowrap; }
.hs-prateleira { display: grid; gap: 2px; justify-items: center; align-self: center; } .hs-prateleira > div { display: flex; gap: 4px; min-height: 40px; min-width: 140px; justify-content: center; border-bottom: 6px solid #92400e; padding: 0 6px; font-size: 26px; } .hs-prateleira small { font-size: 11px; font-weight: 800; color: #78350f; background: #fde68a; border-radius: 4px; padding: 1px 8px; }
.hs-prateleira.vazia { width: 170px; } .hs-prateleira.vazia i { display: block; width: 100%; height: 34px; border-bottom: 6px solid #92400e; } .hs-prateleira.vazia i:first-child::after { content: 'vazio'; font-size: 11px; color: #94a3b8; font-style: italic; }
.hs-prateleira span.nova { animation: oqEntraItem .5s cubic-bezier(.2,1.3,.4,1); display: inline-block; }
.hs-gondola { display: grid; grid-template-columns: repeat(2, auto); gap: 10px 18px; align-self: center; background: rgba(255,255,255,.5); border-radius: 12px; padding: 10px; }
.hs-fala-solta { display: flex; align-items: center; gap: 8px; margin-top: 10px; } .hs-fala-solta .oq-boneco { width: 60px; height: 85px; } .hs-fala-solta p { margin: 0; background: #fff; border-radius: 14px; padding: 8px 12px; font-weight: 600; box-shadow: 0 6px 18px rgba(15,23,42,.18); }
.hs-doc .hs-doc-topo { display: grid; border-bottom: 2px dashed #cbd5e1; padding-bottom: 6px; } .hs-doc .hs-doc-topo b { font-size: 15px; color: #1e3a8a; } .hs-doc .hs-doc-topo small { color: #64748b; }
.hs-bagunca { position: relative; width: 220px; height: 150px; align-self: center; } .hs-bagunca span { position: absolute; font-size: 30px; animation: oqVoa 3s ease-in-out infinite; animation-delay: calc(var(--i) * -.4s); }
.hs-niveis { display: grid; gap: 8px; width: min(520px, 100%); }
.hs-nivel { margin-left: calc(var(--i) * 34px); background: #fff; border-left: 6px solid hsl(calc(220 + var(--i) * 30) 80% 55%); border-radius: 10px; padding: 7px 12px; display: grid; grid-template-columns: 130px 1fr; align-items: center; column-gap: 10px; text-align: left; box-shadow: 0 4px 12px rgba(15,23,42,.12); }
.hs-nivel small { font-size: 11px; font-weight: 800; color: #475569; text-transform: uppercase; } .hs-nivel b { font-size: 15px; } .hs-nivel em { grid-column: 2; font-style: normal; font-size: 11.5px; color: #7c3aed; }
.hs-nivel.nova { animation: oqEntraItem .5s cubic-bezier(.2,1.3,.4,1); }
.hs-grafico { width: 300px; background: #fff; border-radius: 14px; padding: 12px 14px; display: grid; gap: 8px; box-shadow: 0 8px 22px rgba(15,23,42,.18); align-self: center; text-align: left; } .hs-grafico > small { font-size: 11px; font-weight: 800; color: #2563eb; text-transform: uppercase; }
.hs-barra { display: grid; grid-template-columns: 82px 1fr auto; gap: 6px; align-items: center; font-size: 12px; } .hs-barra i { height: 14px; width: var(--w); border-radius: 0 6px 6px 0; background: linear-gradient(90deg, #60a5fa, #2563eb); animation: hsCresce .8s ease-out; transform-origin: left; } .hs-barra b { font-size: 12px; }
@keyframes hsCresce { from { transform: scaleX(0); } }
.hs-ranking { width: 280px; background: #fff; border-radius: 14px; padding: 10px 12px; display: grid; gap: 6px; box-shadow: 0 8px 22px rgba(15,23,42,.18); align-self: center; text-align: left; } .hs-ranking > small { font-size: 10.5px; font-weight: 800; color: #dc2626; }
.hs-pos { display: grid; grid-template-columns: 26px 40px 1fr auto; align-items: center; gap: 6px; border-radius: 8px; padding: 2px 6px; transition: background .3s; } .hs-pos span { font-size: 20px; } .hs-pos .oq-boneco { width: 36px; height: 51px; animation: none; } .hs-pos strong { font-size: 15px; }
.hs-pos.mudou { background: #fef3c7; animation: oqBalao .5s cubic-bezier(.2,1.4,.4,1); }
.hs-conta { display: grid; gap: 8px; align-self: center; width: 280px; } .hs-conta > div { background: #fff; border-radius: 12px; padding: 8px 12px; display: grid; grid-template-columns: 1fr auto; align-items: center; text-align: left; box-shadow: 0 4px 12px rgba(15,23,42,.12); } .hs-conta small { grid-column: 1 / -1; font-size: 11px; font-weight: 800; color: #64748b; text-transform: uppercase; } .hs-conta b { font-size: 13px; } .hs-conta strong { font-size: 17px; } .hs-conta .vermelho { color: #dc2626; } .hs-conta .verde { color: #16a34a; }
.hs-conta .economia { background: #dcfce7; border: 2px solid #16a34a; } .hs-conta .economia strong { grid-column: 1 / -1; font-size: 24px; color: #15803d; }
.hs-meta { width: 280px; background: #fff; border-radius: 14px; padding: 12px 14px; display: grid; gap: 6px; box-shadow: 0 8px 22px rgba(15,23,42,.18); align-self: center; text-align: left; } .hs-meta small { font-size: 11px; font-weight: 800; color: #2563eb; } .hs-meta strong { font-size: 26px; } .hs-meta p { margin: 0; font-size: 13px; }
.hs-meta-barra { height: 18px; border-radius: 9px; background: #e2e8f0; overflow: hidden; } .hs-meta-barra i { display: block; height: 100%; background: linear-gradient(90deg, #22c55e, #16a34a); border-radius: 9px; transition: width 1.6s ease-out; }
.hs-conversao { display: grid; grid-template-columns: repeat(5, 64px); gap: 10px; justify-content: center; } .hs-conversao span { height: 64px; border-radius: 12px; display: grid; place-items: center; font-size: 26px; background: #fff; box-shadow: 0 4px 12px rgba(15,23,42,.12); animation: scSobe .4s ease-out both; animation-delay: calc(var(--i) * .07s); }
.hs-conversao span.ganho { background: #dcfce7; color: #16a34a; font-weight: 900; } .hs-conversao span.perdido { background: #f1f5f9; color: #94a3b8; }
.hs-conversao .hs-formula { grid-column: 1 / -1; }
.hs-formula { background: #fff; border-radius: 10px; padding: 8px 14px; font-size: 16px; text-align: center; box-shadow: 0 4px 12px rgba(15,23,42,.12); } .hs-formula.destaque { background: #ede9fe; border: 2px solid #7c3aed; font-size: 19px; }
.hs-ticket { display: grid; gap: 10px; justify-items: center; } .hs-moedas { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; } .hs-moedas span { background: #fef3c7; border: 2px solid #f59e0b; border-radius: 99px; padding: 8px 14px; font-weight: 800; color: #92400e; animation: scSobe .45s ease-out both; animation-delay: calc(var(--i) * .12s); }
@media (max-width: 760px) { .hs-no { width: 96px; min-height: 92px; } .hs-liga { width: 10px; } .hs-conversao { grid-template-columns: repeat(5, 46px); } .hs-conversao span { height: 46px; font-size: 20px; } .hs-nivel { grid-template-columns: minmax(0, 1fr); margin-left: calc(var(--i) * 12px); } .hs-nivel em { grid-column: auto; } .hs-roda { display: none; } }
.hs-fala-solta.vazio { min-height: 95px; }
.oq-ficha.hs-doc { width: min(680px, 100%); grid-template-columns: repeat(2, minmax(0, 1fr)); } .hs-doc .hs-doc-topo { grid-column: 1 / -1; } @media (max-width: 760px) { .oq-ficha.hs-doc { grid-template-columns: minmax(0, 1fr); } }
.hs-meta-barra i.cresce { animation: hsCresce 1.6s ease-out; transform-origin: left; }

/* ===== Funil animado (fn-*) ===== */
.fx-quadro { width: 100%; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; background: rgba(255,255,255,.55); border-radius: 14px; padding: 8px; position: relative; }
.fx-col { background: #f1f5f9; border-radius: 10px; padding: 5px; min-height: 150px; display: flex; flex-direction: column; gap: 5px; position: relative; transition: background .3s; }
.fx-col.atual { background: #dbeafe; box-shadow: inset 0 0 0 2px #2563eb; } .fx-col.ganho { background: #dcfce7; } .fx-col.ganho.atual { box-shadow: inset 0 0 0 2px #16a34a; }
.fx-col-topo { display: grid; gap: 1px; text-align: left; } .fx-col-topo b { font-size: 9.5px; letter-spacing: .03em; color: #334155; } .fx-col.ganho .fx-col-topo b { color: #15803d; }
.fx-col-topo small { font-size: 9.5px; font-weight: 700; color: #2563eb; }
.fx-card { background: #fff; border-radius: 7px; padding: 5px 6px; display: grid; gap: 2px; text-align: left; box-shadow: 0 2px 6px rgba(15,23,42,.12); border-left: 3px solid #94a3b8; }
.fx-card b { font-size: 10.5px; line-height: 1.15; } .fx-card small { font-size: 9px; color: #64748b; }
.fx-card-linha { display: flex; justify-content: space-between; align-items: center; font-size: 10px; font-weight: 700; } .fx-card-linha em { font-style: normal; color: #2563eb; }
.fx-card.maria { border-left-color: #2563eb; box-shadow: 0 6px 16px rgba(37,99,235,.3); z-index: 2; } .fx-card.maria.ganho { border-left-color: #16a34a; } .fx-card.maria.ganho em { color: #16a34a; }
.fx-ev { font-style: normal; font-size: 9px; background: #eff6ff; color: #1d4ed8; border-radius: 4px; padding: 1px 4px; }
.fx-card.atrasado { border-left-color: #dc2626; animation: oqVibra 1.2s ease-in-out 2; } .fx-card .dias-vermelho { color: #dc2626; }
.fx-card.cai { animation: fxCai .9s cubic-bezier(.3,1.5,.5,1); } @keyframes fxCai { 0% { opacity: 0; transform: translateY(-160px) rotate(-8deg) scale(.8); } 60% { opacity: 1; transform: translateY(8px) rotate(2deg); } 100% { transform: none; } }
.fx-card.chega { animation: fxChega .7s cubic-bezier(.3,1.3,.5,1); } @keyframes fxChega { from { transform: translateX(-115%) rotate(-4deg); opacity: .6; } }
.fx-card.brilha { animation: fxBrilha 1s ease-in-out 2; } @keyframes fxBrilha { 50% { box-shadow: 0 0 0 4px rgba(250,204,21,.8), 0 6px 16px rgba(37,99,235,.3); } }
.fx-rastro { position: absolute; right: -10px; top: 40%; z-index: 3; font-size: 18px; color: #2563eb; animation: fxRastro .8s ease-out forwards; } @keyframes fxRastro { from { opacity: 1; transform: translateX(-20px); } to { opacity: 0; transform: translateX(10px); } }
.fx-dupla { width: 100%; display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; margin-top: 6px; }
.fx-pessoa { display: grid; justify-items: center; width: 200px; } .fx-pessoa .oq-boneco { width: 72px; height: 102px; } .fx-pessoa > b { font-size: 12px; }
.fx-pessoa .oq-balao { font-size: 12.5px; margin-bottom: 8px; } .fx-balao-vazio { min-height: 50px; }
.fx-pessoa:not(.fala) { opacity: .75; }
.fx-zap { align-self: center; background: #d9fdd3; color: #111b21; border-radius: 12px; padding: 8px 12px; font-size: 13px; font-weight: 600; box-shadow: 0 4px 12px rgba(15,23,42,.15); max-width: 300px; }
.fx-zap.vazio { visibility: hidden; }
.fx-zap.voando { background: none; box-shadow: none; font-size: 34px; animation: fxVoa .9s ease-in forwards; } @keyframes fxVoa { to { transform: translate(-260px, -190px) scale(.4); opacity: 0; } }
.fx-confete { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .fx-confete i { position: absolute; top: -20px; font-style: normal; font-size: 20px; animation: fxConfete 2.4s ease-in forwards; animation-delay: calc(var(--i) * .07s); } @keyframes fxConfete { to { transform: translateY(380px) rotate(540deg); opacity: .2; } }
@media (max-width: 760px) { .fx-quadro { grid-template-columns: repeat(7, 92px); overflow-x: auto; } .fx-pessoa { width: 130px; } }
.fx-card:not(.maria) { opacity: .8; } .fx-card.maria { order: -1; }
.fx-col-topo { order: -2; }

/* ===== Cefas Log (telas do Hub) ===== */
.lg-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 12px; }
.lg-filtros { display: flex; flex-wrap: wrap; gap: 8px; } .lg-filtros input, .lg-vfiltros input, .lg-grade4 input, .lg-dois input { border: 0; background: var(--s-muted, #f1f5f9); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 13px; min-width: 0; color: inherit; }
.lg-filtros input { flex: 1 1 150px; }
.lg-sel, .lg-periodo { display: inline-flex; align-items: center; gap: 6px; background: var(--s-muted, #f1f5f9); border-radius: 8px; padding: 8px 10px; font-size: 13px; color: var(--s-txt2); white-space: nowrap; } .lg-sel .ic, .lg-periodo .ic { width: 15px; height: 15px; color: #2563eb; }
.lg-periodo { background: var(--s-card); border: 1px solid var(--s-borda); color: var(--s-txt); font-weight: 600; }
.lg-selbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; border: 1px dashed #93c5fd; background: hsl(214 95% 97%); border-radius: 12px; padding: 12px; margin-bottom: 12px; font-size: 13px; }
.lg-selbar label { display: inline-flex; align-items: center; gap: 6px; } .lg-selbar input[type=date] { border: 1px solid var(--s-borda); border-radius: 8px; padding: 6px 8px; font: inherit; font-size: 13px; background: var(--s-card); color: inherit; }
.lg-cb { border: 0; background: none; padding: 0; cursor: pointer; color: #94a3b8; display: grid; } .lg-cb .ic { width: 18px; height: 18px; } .lg-cb.on { color: #2563eb; } .lg-cb:disabled { opacity: .35; cursor: default; }
.lg-badge { display: inline-block; border-radius: 99px; padding: 2px 9px; font-size: 11px; font-weight: 700; background: var(--s-muted, #f1f5f9); color: var(--s-txt2); } .lg-badge.verde { background: #dcfce7; color: #15803d; }
.lg-azul { color: #2563eb; font-weight: 600; } .lg-verm { color: #dc2626; font-weight: 700; }
.lg-grade4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: end; } .lg-grade3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.lg-dois { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--s-txt2); } .lg-dois input { width: 100%; }
.lg-fim { display: flex; justify-content: flex-end; }
.lg-clica { cursor: pointer; } .lg-clica:hover td { background: hsl(214 95% 97%); } .lg-clica.sel td { background: #dbeafe; font-weight: 600; }
.lg-resumos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.lg-resumo { border: 1px solid var(--s-borda); border-radius: 12px; padding: 10px 12px; background: var(--s-card); } .lg-resumo.azul { background: hsl(214 95% 96%); border-color: #93c5fd; }
.lg-resumo > small { font-size: 11px; font-weight: 800; color: var(--s-txt2); } .lg-resumo > div { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 4px; } .lg-resumo span { display: grid; font-size: 11px; color: var(--s-txt2); } .lg-resumo span b { font-size: 15px; color: var(--s-txt); }
.lg-chip { display: inline-block; border-radius: 99px; padding: 2px 8px; font-size: 11px; font-weight: 700; background: var(--s-muted, #f1f5f9); color: var(--s-txt2); white-space: nowrap; }
.lg-chip.azul { background: #dbeafe; color: #1d4ed8; } .lg-chip.verde { background: #dcfce7; color: #15803d; } .lg-chip.verm { background: #fee2e2; color: #b91c1c; } .lg-chip.laranja { background: #ffedd5; color: #c2410c; } .lg-chip.cinza { background: #e5e7eb; color: #4b5563; }
.lg-viagens { display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: 14px; align-items: start; }
.lg-vtopo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.lg-vfiltros { display: grid; gap: 8px; } .lg-vlista { display: grid; gap: 8px; margin-top: 10px; }
.lg-vcard, .lg-carga { text-align: left; border: 1px solid var(--s-borda); background: var(--s-card); border-radius: 12px; padding: 10px 12px; display: grid; gap: 3px; cursor: pointer; font: inherit; color: inherit; }
.lg-vcard > div, .lg-carga > div:first-child { display: flex; justify-content: space-between; align-items: center; } .lg-vcard small, .lg-carga small { font-size: 12px; color: var(--s-txt2); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .lg-vcard .ic, .lg-carga .ic { width: 13px; height: 13px; }
.lg-vcard.sel, .lg-carga.sel { border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37,99,235,.15); } .lg-vcard.novo { animation: scSobe .5s ease-out; }
.lg-vdet { border: 1px solid var(--s-borda); background: var(--s-card); border-radius: 14px; padding: 14px; display: grid; gap: 10px; } .lg-vdet.vazio { color: var(--s-txt2); font-size: 14px; border-style: dashed; place-items: center; min-height: 120px; }
.lg-vdet h3 { display: flex; align-items: center; gap: 8px; margin: 0; } .lg-vdet .sim-sub .ic { width: 13px; height: 13px; vertical-align: -2px; }
.lg-prog { margin: 0; font-size: 13px; }
.lg-paradas { display: grid; gap: 6px; }
.lg-parada, .ap-parada { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; text-align: left; border: 1px solid var(--s-borda); background: var(--s-card); border-radius: 10px; padding: 8px 10px; cursor: pointer; font: inherit; color: inherit; }
.lg-parada > div, .ap-parada > div { display: grid; min-width: 0; } .lg-parada small, .ap-parada small { font-size: 11.5px; color: var(--s-txt2); }
.lg-parada.sel { border-color: #2563eb; } .lg-parada.E, .ap-parada.E { border-left: 4px solid #16a34a; } .lg-parada.R, .ap-parada.R { border-left: 4px solid #dc2626; }
.lg-ord { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #1e3a8a; color: #fff; font-size: 12px; font-weight: 800; }
.lg-comp { border: 1px solid #bbf7d0; background: #f0fdf4; border-radius: 12px; padding: 10px 12px; display: grid; gap: 6px; font-size: 13px; animation: scSobe .4s ease-out; } .lg-comp.verm { border-color: #fecaca; background: #fef2f2; }
.lg-comp h4 { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 14px; } .lg-comp p { margin: 0; }
.lg-linha { display: flex; flex-wrap: wrap; gap: 6px; } .lg-linha span { background: #fff; border: 1px solid var(--s-borda); border-radius: 8px; padding: 3px 8px; font-size: 12px; } .lg-linha span.verde { border-color: #16a34a; color: #15803d; } .lg-linha span.verm { border-color: #dc2626; color: #b91c1c; }
.lg-miniaturas { display: flex; gap: 10px; } .lg-miniaturas > div { width: 130px; height: 70px; border: 1px solid var(--s-borda); border-radius: 8px; background: #fff; display: grid; place-items: center; position: relative; overflow: hidden; }
.lg-mini-assina small { position: absolute; bottom: 2px; right: 6px; font-size: 10px; color: var(--s-txt2); } .lg-mini-assina .ap-assina { width: 120px; } .lg-mini-assina .ap-assina path { animation: none; stroke-dashoffset: 0; }
.lg-foto { display: inline-grid; justify-items: center; gap: 1px; width: 100%; height: 100%; place-content: center; background: linear-gradient(135deg, #cbd5e1, #94a3b8); color: #fff; border-radius: 6px; padding: 4px 8px; min-width: 70px; min-height: 40px; } .lg-foto .ic { width: 18px; height: 18px; } .lg-foto small { font-size: 9.5px; font-weight: 700; }
td .lg-foto { width: 70px; height: 42px; }
.lg-dev { color: #b91c1c; } .lg-dev .ic { width: 14px; height: 14px; vertical-align: -2px; }
.lg-custo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12.5px; color: var(--s-txt2); border-top: 1px dashed var(--s-borda); padding-top: 8px; } .lg-custo .ic { width: 15px; height: 15px; color: #d97706; } .lg-custo span { white-space: nowrap; }
.lg-semaforo { width: 12px; height: 12px; border-radius: 50%; display: inline-block; } .lg-semaforo.verde { background: #16a34a; box-shadow: 0 0 0 3px #bbf7d0; }
.lg-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.lg-kpi { border-radius: 12px; padding: 10px 12px; display: grid; gap: 2px; border: 1px solid; } .lg-kpi small { font-size: 11px; font-weight: 800; display: flex; align-items: center; gap: 5px; } .lg-kpi small .ic { width: 14px; height: 14px; } .lg-kpi b { font-size: 24px; } .lg-kpi em { font-style: normal; font-size: 11px; opacity: .8; }
.lg-kpi.azul { background: #eff6ff; border-color: #93c5fd; color: #1d4ed8; } .lg-kpi.cinza { background: #f8fafc; border-color: #e2e8f0; color: #475569; } .lg-kpi.verde { background: #f0fdf4; border-color: #86efac; color: #15803d; } .lg-kpi.verm { background: #fef2f2; border-color: #fca5a5; color: #b91c1c; } .lg-kpi.laranja { background: #fff7ed; border-color: #fdba74; color: #c2410c; } .lg-kpi.ciano { background: #ecfeff; border-color: #67e8f9; color: #0e7490; }
.lg-cargas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.lg-barra { height: 8px; border-radius: 4px; background: #e2e8f0; overflow: hidden; } .lg-barra i { display: block; height: 100%; background: linear-gradient(90deg, #22c55e, #16a34a); }
.lg-pe-linha { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; gap: 8px; align-items: center; border-bottom: 1px solid var(--s-borda); padding: 7px 0; font-size: 13px; } .lg-pe-linha span { font-size: 12px; color: var(--s-txt2); }
.lg-monitor { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(220px, 1fr); gap: 12px; margin-top: 12px; }
.lg-mapa { border-radius: 14px; overflow: hidden; border: 1px solid var(--s-borda); } .lg-mapa svg { display: block; width: 100%; height: auto; }
.lg-pin circle { fill: #94a3b8; stroke: #fff; stroke-width: 3; } .lg-pin.ok circle { fill: #16a34a; } .lg-pin.atr circle { fill: #ea580c; animation: oqBate 1.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; } .lg-pin text { fill: #fff; font-size: 11px; font-weight: 800; }
.lg-mon-lista { display: grid; gap: 10px; align-content: start; }
.lg-aviso { display: flex; gap: 6px; align-items: center; background: #fffbeb; border: 1px solid #fcd34d; border-radius: 10px; padding: 8px 12px; font-size: 13px; } .lg-aviso .ic { width: 16px; height: 16px; color: #d97706; }
.lg-vazio { border: 1px dashed var(--s-borda); border-radius: 14px; padding: 30px; text-align: center; color: var(--s-txt2); font-size: 14px; }
.sim-tabela tr.apagado td { opacity: .5; }
@media (max-width: 760px) { .lg-viagens, .lg-monitor, .lg-cargas, .lg-resumos { grid-template-columns: minmax(0, 1fr); } .lg-grade4, .lg-grade3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lg-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lg-pe-linha { grid-template-columns: minmax(0, 1fr); } }

/* ===== App do motorista (ILUSTRAÇÃO) ===== */
.ap-fundo { position: absolute; inset: 0; z-index: 40; background: rgba(15, 23, 42, .55); display: grid; place-items: center; padding: 12px; animation: entraCena .3s ease-out; overflow-y: auto; }
.ap-palco { display: flex; align-items: flex-end; gap: 18px; }
.ap-cliente { display: grid; justify-items: center; gap: 6px; color: #fff; max-width: 150px; text-align: center; animation: oqEntraItem .5s cubic-bezier(.2,1.3,.4,1); } .ap-cliente .oq-boneco { width: 110px; height: 156px; } .ap-cliente small { font-size: 12px; font-weight: 600; }
.ap-cel { width: 300px; height: min(590px, 92vh); border: 9px solid #0f172a; border-radius: 34px; background: #f8fafc; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 30px 70px rgba(0,0,0,.45); position: relative; color: #0f172a; font-size: 13px; text-align: left; }
.ap-faixa { background: repeating-linear-gradient(135deg, #fde68a 0 10px, #fcd34d 10px 20px); color: #78350f; font-size: 10.5px; font-weight: 800; text-align: center; padding: 4px; display: flex; gap: 4px; justify-content: center; align-items: center; } .ap-faixa .ic { width: 12px; height: 12px; }
.ap-app { flex: 1; display: flex; flex-direction: column; min-height: 0; position: relative; }
.ap-topo { background: linear-gradient(135deg, #1d4ed8, #4f46e5); color: #fff; padding: 12px 14px; display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; } .ap-topo b { font-size: 15px; } .ap-topo small { grid-column: 1 / -1; font-size: 11.5px; opacity: .85; } .ap-topo:has(.ap-voltar) small { grid-column: 2; }
.ap-voltar { border: 0; background: rgba(255,255,255,.18); color: #fff; border-radius: 8px; width: 28px; height: 28px; display: grid; place-items: center; cursor: pointer; grid-row: span 2; } .ap-voltar .ic { width: 16px; height: 16px; }
.ap-corpo { flex: 1; overflow-y: auto; padding: 12px; display: grid; gap: 8px; align-content: start; } .ap-corpo h4 { margin: 0; font-size: 14px; }
.ap-card { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center; text-align: left; background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 12px; cursor: pointer; font: inherit; color: inherit; box-shadow: 0 2px 8px rgba(15,23,42,.06); } .ap-card > div { display: flex; gap: 8px; align-items: center; } .ap-card small { color: #64748b; } .ap-card .ic { grid-row: span 2; grid-column: 2; width: 18px; height: 18px; color: #94a3b8; }
.ap-resumo { background: #eef2ff; border-radius: 12px; padding: 10px; } .ap-resumo small { font-size: 11px; font-weight: 700; color: #4338ca; } .ap-resumo > div { display: flex; justify-content: space-between; margin-top: 6px; } .ap-resumo span { display: grid; font-size: 10.5px; color: #475569; text-align: center; } .ap-resumo span b { font-size: 15px; color: #1e1b4b; }
.ap-btn { border: 0; border-radius: 12px; padding: 11px; font: inherit; font-weight: 800; font-size: 14px; display: flex; gap: 6px; align-items: center; justify-content: center; cursor: pointer; color: #fff; } .ap-btn .ic { width: 17px; height: 17px; }
.ap-btn.azul { background: #2563eb; } .ap-btn.verde { background: #16a34a; } .ap-btn.verm { background: #dc2626; } .ap-btn.verm-borda { background: #fff; color: #dc2626; border: 1.5px solid #fca5a5; } .ap-btn.desab { opacity: .45; }
.ap-gps { margin: 0; font-size: 11.5px; color: #15803d; background: #f0fdf4; border-radius: 8px; padding: 6px 8px; display: flex; gap: 5px; align-items: center; } .ap-gps .ic { width: 13px; height: 13px; animation: oqBate 1.4s ease-in-out infinite; }
.ap-parada { background: #fff; } .ap-parada .lg-chip { font-size: 10px; }
.ap-end { margin: 0; font-size: 12px; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 8px; } .ap-end .ic { width: 13px; height: 13px; color: #dc2626; vertical-align: -2px; } .ap-end small { color: #64748b; }
.ap-etapas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .ap-etapas button { border: 1.5px solid #c7d2fe; background: #fff; color: #3730a3; border-radius: 10px; padding: 8px 4px; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; display: grid; justify-items: center; gap: 2px; } .ap-etapas button .ic { width: 14px; height: 14px; }
.ap-etapas button.feito { background: #4f46e5; color: #fff; border-color: #4f46e5; } .ap-etapas button small { font-size: 10px; opacity: .9; }
.ap-itens-topo { display: flex; justify-content: space-between; align-items: center; margin-top: 2px; }
.ap-item { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 8px; display: grid; gap: 6px; } .ap-item > div:first-child { display: grid; } .ap-item b { font-size: 12px; } .ap-item small { font-size: 11px; color: #64748b; }
.ap-item.E { border-color: #86efac; background: #f0fdf4; } .ap-item.D { border-color: #fca5a5; background: #fef2f2; }
.ap-item-bts { display: flex; gap: 6px; }
.ap-mini { border: 1px solid #cbd5e1; background: #fff; border-radius: 8px; padding: 4px 8px; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; display: inline-flex; gap: 3px; align-items: center; color: #334155; } .ap-mini .ic { width: 12px; height: 12px; }
.ap-mini.on { background: #16a34a; border-color: #16a34a; color: #fff; } .ap-mini.verm { color: #dc2626; border-color: #fca5a5; } .ap-mini.verm.on { background: #dc2626; color: #fff; }
.ap-dlg { position: absolute; left: 0; right: 0; bottom: 0; background: #fff; border-radius: 18px 18px 0 0; padding: 14px; display: grid; gap: 9px; box-shadow: 0 -10px 30px rgba(15,23,42,.25); animation: apSobe .35s cubic-bezier(.2,1.2,.4,1); max-height: 92%; overflow-y: auto; }
@keyframes apSobe { from { transform: translateY(100%); } }
.ap-app:has(.ap-dlg)::after { content: ''; position: absolute; inset: 0; background: rgba(15,23,42,.35); z-index: 0; } .ap-dlg { z-index: 1; }
.ap-dlg h4 { margin: 0; display: flex; gap: 6px; align-items: center; font-size: 15px; } .ap-dlg h4 .ic { width: 17px; height: 17px; }
.ap-dlg label { display: grid; gap: 4px; font-size: 11.5px; font-weight: 700; color: #475569; } .ap-dlg input, .ap-dlg select { border: 1.5px solid #cbd5e1; border-radius: 10px; padding: 9px 10px; font: inherit; font-size: 14px; color: #0f172a; background: #fff; }
.ap-foto-bt { border: 1.5px dashed #94a3b8; background: #f8fafc; border-radius: 10px; min-height: 64px; display: flex; gap: 6px; align-items: center; justify-content: center; font: inherit; font-weight: 700; color: #475569; cursor: pointer; padding: 6px; } .ap-foto-bt .ic { width: 18px; height: 18px; } .ap-foto-bt.on { border-style: solid; border-color: #16a34a; } .ap-foto-bt.on .lg-foto { width: 120px; height: 56px; }
.ap-placa { margin: 0; display: flex; justify-content: space-between; background: #f1f5f9; border-radius: 8px; padding: 7px 10px; font-size: 13px; } .ap-placa span { color: #64748b; }
.ap-dlg-bts { display: flex; gap: 8px; justify-content: flex-end; align-items: center; } .ap-dlg-bts .ap-btn { flex: 1; padding: 10px; font-size: 13px; }
.ap-sub { margin: 0; font-size: 12px; color: #475569; } .ap-nota { margin: 0; font-size: 11px; color: #92400e; background: #fffbeb; border-radius: 8px; padding: 6px 8px; }
.ap-assinatura { border: 1.5px dashed #94a3b8; background: #fff; border-radius: 10px; height: 92px; display: grid; place-items: center; cursor: pointer; font: inherit; color: #94a3b8; font-size: 13px; } .ap-assinatura.on { border-style: solid; border-color: #2563eb; }
.ap-assina { width: 210px; height: 66px; } .ap-assina path { fill: none; stroke: #1e3a8a; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 700; stroke-dashoffset: 700; animation: apAssina 1.6s ease-out forwards; }
@keyframes apAssina { to { stroke-dashoffset: 0; } }
.ap-motivos { display: grid; gap: 4px; } .ap-motivos button { border: 1px solid #e2e8f0; background: #fff; border-radius: 8px; padding: 8px 10px; text-align: left; font: inherit; font-size: 13px; cursor: pointer; } .ap-motivos button.on { border-color: #dc2626; background: #fef2f2; font-weight: 700; color: #b91c1c; }
.ap-fim { display: grid; justify-items: center; gap: 4px; background: #f0fdf4; border: 1px solid #86efac; border-radius: 12px; padding: 12px; text-align: center; } .ap-fim .ic { width: 26px; height: 26px; color: #16a34a; } .ap-fim small { color: #166534; font-size: 12px; }
.ap-vazio { color: #64748b; font-size: 13px; }
@media (max-width: 640px) { .ap-cliente { display: none; } .ap-cel { width: min(300px, 92vw); } }
/* estrada do Cefas Log (log-4) */
.hs-estrada { position: relative; width: 100%; height: 150px; }
.hs-asfalto { position: absolute; left: 0; right: 0; bottom: 18px; height: 34px; background: #475569; border-radius: 6px; } .hs-asfalto::after { content: ''; position: absolute; left: 0; right: 0; top: 15px; height: 4px; background: repeating-linear-gradient(90deg, #fde047 0 22px, transparent 22px 40px); }
.hs-casa { position: absolute; bottom: 52px; transform: translateX(-50%); display: grid; justify-items: center; gap: 2px; } .hs-casa span { font-size: 40px; line-height: 1; } .hs-casa b { font-size: 11px; background: #fff; border-radius: 8px; padding: 2px 6px; box-shadow: 0 3px 8px rgba(15,23,42,.18); white-space: nowrap; animation: oqBalao .5s cubic-bezier(.2,1.4,.4,1); }
.hs-casa.ok span { filter: drop-shadow(0 0 6px rgba(34,197,94,.8)); }
.hs-caminhao { position: absolute; bottom: 22px; font-size: 38px; transform: translateX(-50%) scaleX(-1); left: var(--ate); animation: hsDirige 2.4s ease-in-out; } @keyframes hsDirige { from { left: var(--de); } to { left: var(--ate); } }