@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0');
/* ==========================================================================
   OmniSmart — Mockups vetoriais animados (substituem os screenshots .png)
   CSS-only: as animações rodam sem depender de JS e respeitam prefers-reduced-motion.
   ========================================================================== */
/* Garante que os ícones dos mockups usem a fonte COMPLETA (as páginas podem ter
   uma versão subsetada do Material Symbols que não inclui todos os glifos). */
.omk .msym {
  font-family: 'Material Symbols Rounded' !important;
  font-weight: normal; font-style: normal; line-height: 1;
  letter-spacing: normal; text-transform: none; white-space: nowrap;
  word-wrap: normal; direction: ltr;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}
.omk {
  position: relative;
  width: 100%;
  background: #fff;
  font-family: 'Nunito Sans', system-ui, sans-serif;
  color: #17162b;
  --omk-blue: #6a3ff2;
  --omk-blue2: #4a2fd6;
  --omk-ink: #17162b;
  --omk-mut: #6b7192;
  --omk-line: #eceef4;
  --omk-green: #12b76a;
  overflow: hidden;
}
/* usa a classe .msym global (Material Symbols já carregado nas páginas) */

/* Barra de janela (topo) comum */
.omk-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--omk-line);
}
.omk-title { display: inline-flex; align-items: center; gap: 8px; font: 800 15px Poppins, sans-serif; color: var(--omk-ink); }
.omk-title .msym { font-size: 19px; color: var(--omk-blue); }
.omk-live { display: inline-flex; align-items: center; gap: 6px; font: 800 11px Poppins, sans-serif; letter-spacing: .04em; text-transform: uppercase; color: var(--omk-green); }
.omk-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--omk-green); animation: omkPulse 1.6s ease-in-out infinite; }
.omk-chip { font: 700 12px 'Nunito Sans', sans-serif; color: var(--omk-mut); background: #f4f6fb; border: 1px solid var(--omk-line); border-radius: 999px; padding: 5px 12px; }

/* ---------- DASHBOARD ---------- */
.omk-dash { display: flex; flex-direction: column; }
.omk-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 16px; }
.omk-kpi { border: 1px solid var(--omk-line); border-radius: 12px; padding: 12px 13px; background: #fbfcff; opacity: 0; transform: translateY(10px); animation: omkUp .5s ease forwards; }
.omk-kpi:nth-child(1) { animation-delay: .15s; }
.omk-kpi:nth-child(2) { animation-delay: .28s; }
.omk-kpi:nth-child(3) { animation-delay: .41s; }
.omk-kpi:nth-child(4) { animation-delay: .54s; }
.omk-kpi-ic { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.omk-kpi-ic .msym { font-size: 18px; }
.omk-kpi-l { font: 700 11.5px 'Nunito Sans', sans-serif; color: var(--omk-mut); }
.omk-kpi-v { font: 800 22px Poppins, sans-serif; color: var(--omk-ink); margin-top: 2px; }
.omk-kpi-t { display: inline-flex; align-items: center; gap: 3px; font: 800 10.5px Poppins, sans-serif; margin-top: 3px; }
.omk-kpi-t.up { color: var(--omk-green); }
.omk-kpi-t.dn { color: #e0483d; }
.omk-kpi-t .msym { font-size: 13px; }

.omk-chart { margin: 0 16px 18px; border: 1px solid var(--omk-line); border-radius: 12px; padding: 14px 16px 12px; background: #fff; }
.omk-chart-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.omk-chart-h b { font: 800 13px Poppins, sans-serif; color: var(--omk-ink); }
.omk-chart-h span { font: 700 11px 'Nunito Sans', sans-serif; color: var(--omk-mut); }
.omk-bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; align-items: end; height: 92px; }
.omk-bar { position: relative; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, var(--omk-blue), var(--omk-blue2)); transform-origin: bottom; transform: scaleY(0); animation: omkGrow .7s cubic-bezier(.22,.61,.36,1) forwards; }
.omk-bar.alt { background: linear-gradient(180deg, #b9a7ff, #8f74f0); }
.omk-bar:nth-child(1) { animation-delay: .5s; }
.omk-bar:nth-child(2) { animation-delay: .58s; }
.omk-bar:nth-child(3) { animation-delay: .66s; }
.omk-bar:nth-child(4) { animation-delay: .74s; }
.omk-bar:nth-child(5) { animation-delay: .82s; }
.omk-bar:nth-child(6) { animation-delay: .9s; }
.omk-bar:nth-child(7) { animation-delay: .98s; }

@keyframes omkUp { to { opacity: 1; transform: none; } }
@keyframes omkGrow { to { transform: scaleY(1); } }
@keyframes omkPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(18,183,106,.5); } 70% { box-shadow: 0 0 0 7px rgba(18,183,106,0); } }

@media (max-width: 560px) {
  .omk-kpis { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .omk-kpi, .omk-bar { animation: none !important; opacity: 1 !important; transform: none !important; }
  .omk-live::before { animation: none !important; }
}

/* ---------- KANBAN ---------- */
.omk-kanban { padding: 16px; }
.omk-kb-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.omk-kb-col { background: #f6f7fb; border: 1px solid var(--omk-line); border-radius: 12px; padding: 10px; }
.omk-kb-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.omk-kb-h span { display: inline-flex; align-items: center; font: 800 12px Poppins, sans-serif; color: var(--omk-ink); }
.omk-kb-h i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 7px; }
.omk-kb-h b { font: 700 11px 'Nunito Sans', sans-serif; color: var(--omk-mut); background: #fff; border: 1px solid var(--omk-line); border-radius: 999px; padding: 1px 8px; }
.omk-kb-card { background: #fff; border: 1px solid var(--omk-line); border-radius: 9px; padding: 10px 11px; margin-bottom: 8px; box-shadow: 0 2px 6px rgba(23,22,43,.05); opacity: 0; transform: translateY(8px); animation: omkUp .5s ease forwards; }
.omk-kb-card:last-child { margin-bottom: 0; }
.omk-kb-card .t { font: 800 12.5px Poppins, sans-serif; color: var(--omk-ink); }
.omk-kb-card .s { font: 700 11px 'Nunito Sans', sans-serif; color: var(--omk-mut); margin-top: 2px; }
.omk-kb-card .m { display: flex; align-items: center; justify-content: space-between; margin-top: 9px; }
.omk-kb-tag { font: 800 9.5px Poppins, sans-serif; text-transform: uppercase; letter-spacing: .03em; border-radius: 5px; padding: 2px 7px; }
.omk-kb-av { width: 21px; height: 21px; border-radius: 50%; font: 800 9px Poppins, sans-serif; color: #fff; display: flex; align-items: center; justify-content: center; }
.omk-kb-col:nth-child(1) .omk-kb-card:nth-child(3){animation-delay:.12s}
.omk-kb-col:nth-child(1) .omk-kb-card:nth-child(4){animation-delay:.22s}
.omk-kb-col:nth-child(2) .omk-kb-card:nth-child(3){animation-delay:.3s}
.omk-kb-col:nth-child(2) .omk-kb-card:nth-child(4){animation-delay:.4s}
.omk-kb-col:nth-child(3) .omk-kb-card:nth-child(3){animation-delay:.48s}

/* ---------- MARKETPLACE (CSS-only) ---------- */
.omk-mkt-search { display: flex; align-items: center; gap: 9px; margin: 15px 16px 2px; padding: 10px 15px; border: 1px solid var(--omk-line); border-radius: 9px; background: #f7f8fc; color: #8a90a8; font: 600 14px 'Nunito Sans', sans-serif; }
.omk-mkt-search .msym { font-size: 19px; }
.omk-mkt-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 14px 16px 18px; }
.omk-mkt-card { display: flex; flex-direction: column; align-items: center; gap: 7px; border: 1px solid #e8eaf2; border-radius: 12px; padding: 14px 8px 12px; background: #fafbfe; text-align: center; opacity: 0; transform: translateY(9px); animation: omkUp .5s ease forwards; }
.omk-mkt-card:nth-child(2){animation-delay:.07s}.omk-mkt-card:nth-child(3){animation-delay:.14s}.omk-mkt-card:nth-child(4){animation-delay:.21s}.omk-mkt-card:nth-child(5){animation-delay:.28s}.omk-mkt-card:nth-child(6){animation-delay:.35s}.omk-mkt-card:nth-child(7){animation-delay:.42s}.omk-mkt-card:nth-child(8){animation-delay:.49s}
.omk-mkt-logo { display: flex; align-items: center; justify-content: center; height: 34px; }
.omk-mkt-logo b { font: 800 15px Poppins, sans-serif; line-height: 1; }
.omk-mkt-name { font: 700 11.5px 'Nunito Sans', sans-serif; color: var(--omk-mut); }
.omk-mkt-btn { display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; padding: 5px 12px; border: 1px solid #cdbcff; border-radius: 7px; color: var(--omk-blue); font: 800 10.5px Poppins, sans-serif; }
.omk-mkt-btn .msym { font-size: 13px; animation: omkSpin 4.5s linear infinite; }

/* ---------- FUNÇÕES / MÓDULOS ---------- */
.omk-funcs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 18px 16px; }
.omk-fn { border: 1px solid var(--omk-line); border-radius: 12px; padding: 15px 12px; background: #fbfcff; text-align: center; opacity: 0; transform: translateY(9px) scale(.98); animation: omkPop .5s cubic-bezier(.22,.61,.36,1) forwards; }
.omk-fn:nth-child(2){animation-delay:.06s}.omk-fn:nth-child(3){animation-delay:.12s}.omk-fn:nth-child(4){animation-delay:.18s}.omk-fn:nth-child(5){animation-delay:.24s}.omk-fn:nth-child(6){animation-delay:.3s}.omk-fn:nth-child(7){animation-delay:.36s}.omk-fn:nth-child(8){animation-delay:.42s}
.omk-fn-ic { width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; }
.omk-fn-ic .msym { font-size: 22px; }
.omk-fn b { display: block; font: 800 12.5px Poppins, sans-serif; color: var(--omk-ink); }
.omk-fn span { font: 700 10.5px 'Nunito Sans', sans-serif; color: var(--omk-mut); }

@keyframes omkPop { to { opacity: 1; transform: none; } }
@keyframes omkSpin { to { transform: rotate(360deg); } }

@media (max-width: 560px) {
  .omk-kb-cols, .omk-mkt-grid, .omk-funcs-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .omk-kb-card, .omk-mkt-card, .omk-fn { animation: none !important; opacity: 1 !important; transform: none !important; }
  .omk-mkt-btn .msym { animation: none !important; }
}

/* ---------- WORKFLOW / AUTOMAÇÃO ---------- */
.omk-flow { padding: 20px 18px 22px; }
.omk-node { position: relative; display: flex; align-items: center; gap: 11px; background: #fff; border: 1px solid var(--omk-line); border-radius: 12px; padding: 12px 14px; box-shadow: 0 4px 12px rgba(23,22,43,.06); opacity: 0; transform: translateY(10px); animation: omkUp .5s ease forwards; max-width: 300px; }
.omk-node.r { margin-left: auto; }
.omk-node.c { margin: 0 auto; }
.omk-node:nth-of-type(2){animation-delay:.18s}.omk-node:nth-of-type(3){animation-delay:.36s}.omk-node:nth-of-type(4){animation-delay:.54s}
.omk-node-ic { width: 34px; height: 34px; border-radius: 9px; flex: none; display: flex; align-items: center; justify-content: center; }
.omk-node-ic .msym { font-size: 19px; }
.omk-node b { display: block; font: 800 12.5px Poppins, sans-serif; color: var(--omk-ink); }
.omk-node span { font: 700 11px 'Nunito Sans', sans-serif; color: var(--omk-mut); }
.omk-conn { height: 26px; width: 2px; margin: 3px 0 3px 30px; background: linear-gradient(#cbd2e6, #cbd2e6); position: relative; overflow: hidden; }
.omk-conn.rr { margin-left: auto; margin-right: 30px; }
.omk-conn::after { content: ""; position: absolute; left: -1px; top: -8px; width: 4px; height: 8px; border-radius: 2px; background: var(--omk-blue); animation: omkFlow 1.8s ease-in-out infinite; }
.omk-tagp { display: inline-block; font: 800 9px Poppins, sans-serif; text-transform: uppercase; letter-spacing: .05em; color: var(--omk-blue); background: rgba(106,63,242,.09); border-radius: 5px; padding: 2px 7px; margin-bottom: 7px; }
@keyframes omkFlow { 0% { top: -8px; } 100% { top: 26px; } }

/* ---------- PABX / TELEFONIA ---------- */
.omk-pabx { display: grid; grid-template-columns: 1.05fr .95fr; min-height: 300px; }
.omk-pabx-list { border-right: 1px solid var(--omk-line); padding: 8px; }
.omk-pabx-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; opacity: 0; transform: translateX(-8px); animation: omkIn .5s ease forwards; }
.omk-pabx-item.on { background: rgba(106,63,242,.06); }
.omk-pabx-item:nth-child(2){animation-delay:.1s}.omk-pabx-item:nth-child(3){animation-delay:.2s}.omk-pabx-item:nth-child(4){animation-delay:.3s}.omk-pabx-item:nth-child(5){animation-delay:.4s}
.omk-pabx-av { width: 30px; height: 30px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; color: #fff; font: 800 11px Poppins, sans-serif; position: relative; }
.omk-pabx-av i { position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%; border: 2px solid #fff; }
.omk-pabx-tx b { display: block; font: 800 12px Poppins, sans-serif; color: var(--omk-ink); }
.omk-pabx-tx span { font: 700 10.5px 'Nunito Sans', sans-serif; color: var(--omk-mut); }
.omk-pabx-call { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 18px; background: linear-gradient(160deg, #241a4d, #4a2fd6); color: #fff; }
.omk-pabx-cav { width: 62px; height: 62px; border-radius: 50%; background: rgba(255,255,255,.14); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; animation: omkRing 2s ease-out infinite; }
.omk-pabx-cav .msym { font-size: 30px; color: #fff; }
.omk-pabx-call b { font: 800 16px Poppins, sans-serif; }
.omk-pabx-call span { font: 700 12px 'Nunito Sans', sans-serif; color: rgba(255,255,255,.7); margin-top: 2px; }
.omk-wave { display: flex; align-items: flex-end; gap: 3px; height: 30px; margin: 16px 0; }
.omk-wave i { width: 3px; border-radius: 2px; background: #2de889; animation: omkWave 1s ease-in-out infinite; }
.omk-wave i:nth-child(odd){animation-delay:.2s}.omk-wave i:nth-child(3n){animation-delay:.35s}.omk-wave i:nth-child(4n){animation-delay:.5s}
.omk-pabx-ctrls { display: flex; gap: 12px; }
.omk-pabx-ctrls span { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.14); }
.omk-pabx-ctrls .msym { color: #fff; font-size: 19px; }
.omk-pabx-ctrls .end { background: #ef4444; }
@keyframes omkIn { to { opacity: 1; transform: none; } }
@keyframes omkRing { 0% { box-shadow: 0 0 0 0 rgba(45,232,137,.5); } 70% { box-shadow: 0 0 0 14px rgba(45,232,137,0); } 100% { box-shadow: 0 0 0 0 rgba(45,232,137,0); } }
@keyframes omkWave { 0%,100% { height: 8px; } 50% { height: 28px; } }

/* ---------- ATENDIMENTO OMNICHANNEL ---------- */
.omk-chat { display: grid; grid-template-columns: 148px 1fr; min-height: 320px; }
.omk-chat-side { background: #17162b; padding: 14px 10px; display: flex; flex-direction: column; gap: 3px; }
.omk-chat-side .lg { display: flex; align-items: center; gap: 7px; color: #fff; font: 800 13px Poppins, sans-serif; margin-bottom: 12px; padding: 0 6px; }
.omk-chat-side .lg span { width: 20px; height: 20px; border-radius: 6px; background: linear-gradient(135deg, #6a3ff2, #a07bff); }
.omk-chat-grp { font: 800 8.5px Poppins, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #6a6790; padding: 10px 8px 4px; }
.omk-chat-nav { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 8px; color: #b7b6cd; font: 700 11.5px 'Nunito Sans', sans-serif; }
.omk-chat-nav.on { background: #6a3ff2; color: #fff; }
.omk-chat-nav .msym { font-size: 16px; }
.omk-chat-main { display: flex; flex-direction: column; background: #f4f6fb; }
.omk-chat-top { display: flex; align-items: center; gap: 9px; padding: 11px 14px; background: #fff; border-bottom: 1px solid var(--omk-line); }
.omk-chat-top .a { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #25d366, #128c7e); color: #fff; display: flex; align-items: center; justify-content: center; font: 800 10px Poppins, sans-serif; }
.omk-chat-top b { font: 800 12.5px Poppins, sans-serif; color: var(--omk-ink); }
.omk-chat-top span { font: 700 10px 'Nunito Sans', sans-serif; color: var(--omk-green); }
.omk-chat-body { flex: 1; padding: 14px; display: flex; flex-direction: column; gap: 9px; }
.omk-bub { max-width: 74%; padding: 8px 11px; border-radius: 12px; font: 600 12px 'Nunito Sans', sans-serif; line-height: 1.4; opacity: 0; transform: translateY(8px); animation: omkUp .45s ease forwards; }
.omk-bub.in { background: #fff; color: #2b2f45; border: 1px solid #e6e8f2; border-bottom-left-radius: 3px; align-self: flex-start; }
.omk-bub.out { background: #6a3ff2; color: #fff; border-bottom-right-radius: 3px; align-self: flex-end; }
.omk-bub:nth-child(2){animation-delay:.5s}.omk-bub:nth-child(3){animation-delay:1s}.omk-bub:nth-child(4){animation-delay:1.5s}
.omk-typing { align-self: flex-start; display: inline-flex; gap: 4px; background: #fff; border: 1px solid #e6e8f2; border-radius: 12px; border-bottom-left-radius: 3px; padding: 10px 12px; opacity: 0; animation: omkUp .4s ease forwards 2s; }
.omk-typing i { width: 6px; height: 6px; border-radius: 50%; background: #9aa0bd; animation: omkBlink 1.2s infinite; }
.omk-typing i:nth-child(2){animation-delay:.2s}.omk-typing i:nth-child(3){animation-delay:.4s}
@keyframes omkBlink { 0%,60%,100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

@media (max-width: 560px) {
  .omk-pabx { grid-template-columns: 1fr; }
  .omk-chat { grid-template-columns: 108px 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .omk-node, .omk-pabx-item, .omk-bub, .omk-typing { animation: none !important; opacity: 1 !important; transform: none !important; }
  .omk-conn::after, .omk-pabx-cav, .omk-wave i, .omk-typing i { animation: none !important; }
}

/* ---------- WORKFLOWS: painel (lista) ---------- */
.omk-wfp { padding: 2px 0; }
.omk-wfp-row { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--omk-line); opacity: 0; transform: translateX(-8px); animation: omkIn .5s ease forwards; }
.omk-wfp-row:last-child { border-bottom: 0; }
.omk-wfp-row:nth-child(2){animation-delay:.1s}.omk-wfp-row:nth-child(3){animation-delay:.2s}.omk-wfp-row:nth-child(4){animation-delay:.3s}
.omk-wfp-ic { width: 34px; height: 34px; border-radius: 9px; flex: none; display: flex; align-items: center; justify-content: center; }
.omk-wfp-ic .msym { font-size: 19px; }
.omk-wfp-tx { flex: 1; min-width: 0; }
.omk-wfp-tx b { display: block; font: 800 13px Poppins, sans-serif; color: var(--omk-ink); }
.omk-wfp-tx span { font: 700 11px 'Nunito Sans', sans-serif; color: var(--omk-mut); }
.omk-wfp-tg { width: 34px; height: 19px; border-radius: 999px; background: var(--omk-green); position: relative; flex: none; }
.omk-wfp-tg::after { content: ""; position: absolute; right: 2px; top: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; }
.omk-wfp-tg.off { background: #cbd2e6; }
.omk-wfp-tg.off::after { left: 2px; right: auto; }
@media (prefers-reduced-motion: reduce) { .omk-wfp-row { animation: none !important; opacity: 1 !important; transform: none !important; } }