/* ==========================================================================
   Réplica interativa do i-Ganhei (hero)
   A tela é desenhada em 1440×900 e reduzida/ampliada para caber no quadro.
   Dados 100% fictícios. Segue o tema da página (claro/escuro).
   ========================================================================== */

.demo {
  position: relative;
  margin-top: clamp(56px, 8vw, 104px);
  aspect-ratio: 16 / 10;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  overflow: hidden;
  background: var(--a-bg);
  box-shadow: 0 30px 80px -30px rgba(15, 23, 42, .28), 0 8px 24px -12px rgba(15, 23, 42, .12);
  text-align: left;
  -webkit-user-select: none; user-select: none;
}
.demo-stage { position: absolute; left: 0; top: 0; width: 1440px; height: 900px; transform-origin: 0 0; }

/* ---------- Tokens da réplica ---------- */
.app {
  --a-bg: #F6F8FB; --a-card: #FFFFFF; --a-line: #E6E9EF; --a-soft: #F1F4F8;
  --a-text: #0F172A; --a-text2: #475569; --a-text3: #94A3B8;
  --a-side: #0E1628; --a-side2: #18223A; --a-side-text: #C7D0DD; --a-side-mute: #7C879A;
  --a-primary: #2457E6; --a-primary-soft: #EAF0FF; --a-active: #3B7BFF;
  --a-green: #16A34A; --a-green-soft: #E8F7EE; --a-red: #DC2626; --a-red-soft: #FDECEC;
  --a-orange: #EA8A0C; --a-orange-soft: #FEF3E2; --a-purple: #7C3AED; --a-purple-soft: #F2ECFE;
  --a-cyan: #0891B2; --a-cyan-soft: #E6F6FA; --a-step: #16C47F;
  position: absolute; inset: 0; display: grid; grid-template-columns: 248px 1fr;
  font: 400 14px/1.4 var(--f-sans); color: var(--a-text); background: var(--a-bg);
}
:root[data-theme="dark"] .app, :root[data-theme="dark"] .demo {
  --a-bg: #0A0F1A; --a-card: #111827; --a-line: #1F2937; --a-soft: #172033;
  --a-text: #E5E7EB; --a-text2: #A3ADBD; --a-text3: #6B7486;
  --a-side: #060A12; --a-side2: #121A2B; --a-side-text: #C7D0DD; --a-side-mute: #6B7486;
  --a-primary: #3B6CFF; --a-primary-soft: #16224A; --a-active: #3B7BFF;
  --a-green-soft: #0F2A1C; --a-red-soft: #2E1414; --a-orange-soft: #2E2210; --a-purple-soft: #221A3A; --a-cyan-soft: #0F2630;
}
.app svg.i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.app button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }

/* ---------- Menu lateral ---------- */
.a-side { background: var(--a-side); color: var(--a-side-text); display: flex; flex-direction: column; min-height: 0; }
.a-logo { height: 80px; display: grid; place-items: center; background: #fff; }
:root[data-theme="dark"] .a-logo { background: var(--a-side); border-bottom: 1px solid var(--a-side2); }
.a-logo img { height: 30px; width: auto; }
.a-logo .lg-dark { display: none; }
:root[data-theme="dark"] .a-logo .lg-light { display: none; }
:root[data-theme="dark"] .a-logo .lg-dark { display: block; }
.a-nav { padding: 18px 10px; display: grid; gap: 3px; overflow: hidden; }
.a-nav .grp { font: 500 11px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--a-side-mute); padding: 14px 12px 6px; }
.a-item { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 9px; font-size: 14.5px; font-weight: 500; text-align: left; width: 100%; transition: background .18s, color .18s; }
.a-item:hover { background: var(--a-side2); color: #fff; }
.a-item.on { background: var(--a-active); color: #fff; }
.a-item .bd { margin-left: auto; min-width: 20px; height: 20px; border-radius: 10px; background: #EF4444; color: #fff; font-size: 11.5px; font-weight: 600; display: grid; place-items: center; padding: 0 6px; }
.a-user { margin-top: auto; border-top: 1px solid var(--a-side2); padding: 14px; }
.a-user div { display: flex; align-items: center; gap: 12px; background: var(--a-side2); border-radius: 10px; padding: 10px 12px; }
.a-user .av { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #3B7BFF, #16C47F); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 13px; }
.a-user b { display: block; color: #fff; font-size: 14px; font-weight: 600; }
.a-user small { color: var(--a-side-mute); font-size: 12px; }

/* ---------- Área principal ---------- */
.a-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; }
.a-top { height: 64px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; background: var(--a-card); border-bottom: 1px solid var(--a-line); }
.a-top h2 { font-size: 20px; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; }
.a-top p { font-size: 13px; color: var(--a-text2); }
.a-tools { display: flex; align-items: center; gap: 16px; color: var(--a-text2); }
.a-search { display: flex; align-items: center; gap: 10px; width: 300px; height: 38px; padding: 0 12px; border: 1px solid var(--a-line); border-radius: 9px; background: var(--a-soft); font-size: 13.5px; color: var(--a-text3); }
.a-search kbd { margin-left: auto; font: 500 10.5px var(--f-mono); border: 1px solid var(--a-line); border-radius: 4px; padding: 1px 5px; background: var(--a-card); }
.a-bell { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; }
.a-bell:hover { background: var(--a-soft); }
.a-bell .dot { position: absolute; top: 2px; right: 1px; min-width: 17px; height: 17px; border-radius: 9px; background: #EF4444; color: #fff; font-size: 10.5px; font-weight: 600; display: grid; place-items: center; }
.a-body { flex: 1; min-height: 0; overflow: hidden; padding: 20px 24px; display: flex; flex-direction: column; gap: 16px; }
.a-screen { display: contents; }
.a-fab { position: absolute; right: 22px; bottom: 20px; width: 52px; height: 52px; border-radius: 50%; background: var(--a-primary); color: #fff; display: grid; place-items: center; box-shadow: 0 8px 22px rgba(36, 87, 230, .35); }

/* ---------- Peças comuns ---------- */
.card { background: var(--a-card); border: 1px solid var(--a-line); border-radius: 12px; }
.pad { padding: 18px 20px; }
.ttl { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.sub { font-size: 12.5px; color: var(--a-text2); margin-top: 2px; }
.ar { display: flex; align-items: center; gap: 10px; }
.grid { display: grid; gap: 14px; }
.tabs { display: inline-flex; gap: 4px; background: var(--a-soft); border-radius: 9px; padding: 4px; align-self: flex-start; }
.tabs span { padding: 6px 12px; border-radius: 7px; font-size: 13px; color: var(--a-text2); font-weight: 500; }
.tabs span.on { background: var(--a-card); color: var(--a-text); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.ctl { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border: 1px solid var(--a-line); border-radius: 9px; background: var(--a-card); font-size: 13.5px; font-weight: 500; color: var(--a-text); white-space: nowrap; }
.ctl.grow { flex: 1; color: var(--a-text3); font-weight: 400; }
.ctl.pri { background: var(--a-primary); border-color: var(--a-primary); color: #fff; }
.ctl svg.i { width: 16px; height: 16px; }
.kpi { padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 76px; }
.kpi small { display: block; font-size: 12.5px; color: var(--a-text2); }
.kpi b { display: block; font-size: 24px; font-weight: 700; letter-spacing: -.02em; margin-top: 2px; }
.kpi .ic { width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; color: #fff; }
.tile { padding: 12px 16px; border-radius: 12px; border: 1px solid var(--a-line); background: var(--a-card); }
.tile small { font-size: 12.5px; color: var(--a-text2); display: block; }
.tile b { font-size: 22px; font-weight: 700; display: block; margin-top: 2px; }
.t-blue { background: var(--a-primary-soft); border-color: rgba(59,123,255,.35); } .t-blue small, .t-blue b { color: var(--a-primary); }
.t-green { background: var(--a-green-soft); border-color: rgba(22,163,74,.3); } .t-green small, .t-green b { color: var(--a-green); }
.t-orange { background: var(--a-orange-soft); border-color: rgba(234,138,12,.3); } .t-orange small, .t-orange b { color: var(--a-orange); }
.t-red { background: var(--a-red-soft); border-color: rgba(220,38,38,.3); } .t-red small, .t-red b { color: var(--a-red); }
.t-cyan { background: var(--a-cyan-soft); border-color: rgba(8,145,178,.3); } .t-cyan small, .t-cyan b { color: var(--a-cyan); }
.bg-blue { background: #2457E6; } .bg-green { background: #16A34A; } .bg-red { background: #E53935; } .bg-orange { background: #F59E0B; } .bg-orange2 { background: #F97316; } .bg-purple { background: #7C3AED; }

.pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid transparent; white-space: nowrap; }
.p-blue { background: var(--a-primary-soft); color: var(--a-primary); border-color: rgba(59,123,255,.35); }
.p-green { background: var(--a-green-soft); color: var(--a-green); border-color: rgba(22,163,74,.35); }
.p-red { background: var(--a-red-soft); color: var(--a-red); border-color: rgba(220,38,38,.35); }
.p-gray { background: var(--a-soft); color: var(--a-text2); border-color: var(--a-line); }
.p-orange { background: var(--a-orange-soft); color: var(--a-orange); border-color: rgba(234,138,12,.35); }
.p-purple { background: var(--a-purple-soft); color: var(--a-purple); border-color: rgba(124,58,237,.3); }
.p-solid-red { background: #EF4444; color: #fff; }
.p-solid-blue { background: var(--a-primary); color: #fff; }

/* Tabela */
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th { text-align: left; font: 600 11.5px var(--f-sans); letter-spacing: .05em; text-transform: uppercase; color: var(--a-text2); padding: 13px 14px; border-bottom: 1px solid var(--a-line); white-space: nowrap; }
.tbl td { padding: 11px 14px; border-bottom: 1px solid var(--a-line); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr { transition: background .15s; }
.tbl tbody tr.click { cursor: pointer; }
.tbl tbody tr.click:hover, .tbl tbody tr.hl { background: var(--a-primary-soft); }
.tbl .num { color: var(--a-primary); font-weight: 700; }
.tbl .mut { color: var(--a-text2); font-size: 12px; }
.tbl .r { text-align: right; white-space: nowrap; }
.tbl td.b:first-child { white-space: nowrap; }
.drawer .tile b { font-size: 17px; white-space: nowrap; }
.tbl .b { font-weight: 700; }
.tbl .mono { font-family: var(--f-mono); font-size: 12.5px; }
.ell { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.star { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 500; }
.star svg.i { width: 15px; height: 15px; }
.s-alta { color: var(--a-green); } .s-media { color: var(--a-orange); } .s-baixa { color: var(--a-text2); }

/* Gráficos */
.chart text { fill: var(--a-text2); font: 400 11px var(--f-sans); }
.chart .gl { stroke: var(--a-line); }

/* Kanban / agenda / listas */
.col { border-radius: 12px; background: var(--a-soft); display: flex; flex-direction: column; min-height: 0; }
.col-h { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-radius: 12px 12px 0 0; font-weight: 600; font-size: 14px; }
.col-h .n { margin-left: auto; font-size: 12px; background: var(--a-card); border-radius: 6px; padding: 1px 8px; color: var(--a-text2); }
.kcard { background: var(--a-card); border: 1px solid var(--a-line); border-radius: 10px; padding: 12px; margin: 8px; font-size: 12.5px; color: var(--a-text2); }
.kcard b { display: block; color: var(--a-text); font-size: 13.5px; margin-bottom: 4px; }
.li { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 10px; background: var(--a-soft); }
.li .ic2 { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; flex: none; }
.li b { font-size: 13.5px; display: block; }
.li small { font-size: 12px; color: var(--a-text2); }

/* Pendências */
.pgroup h4 { text-align: center; font: 600 12px var(--f-mono); letter-spacing: .14em; color: var(--a-text2); margin: 2px 0 10px; }
.pcard { border-top: 3px solid; text-align: center; padding: 14px 12px 12px; }
.pcard .ic2 { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; margin: 0 auto 8px; }
.pcard b { display: block; font-size: 13.5px; }
.pcard small { display: block; font-size: 11.5px; color: var(--a-text2); margin-top: 3px; }
.pcard strong { display: block; font-size: 24px; margin-top: 6px; }

/* Calendário */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); border-top: 1px solid var(--a-line); }
.cal > div { border-right: 1px solid var(--a-line); min-height: 300px; padding: 8px 6px; }
.cal > div:last-child { border-right: 0; }
.cal .dh { text-align: center; font-size: 11.5px; color: var(--a-text2); text-transform: uppercase; letter-spacing: .05em; padding-bottom: 8px; border-bottom: 1px solid var(--a-line); margin: -8px -6px 8px; padding-top: 10px; }
.cal .dh b { display: block; font-size: 18px; color: var(--a-text); letter-spacing: 0; }
.cal .today { background: var(--a-primary-soft); }
.ev { font-size: 11.5px; border-radius: 6px; padding: 5px 7px; margin-bottom: 6px; border: 1px solid; }

/* ---------- Sobreposições ---------- */
.ov { position: absolute; inset: 0; z-index: 20; display: none; }
.ov.show { display: block; }
.ov .scrim { position: absolute; inset: 0; background: rgba(8, 12, 22, .55); animation: fadeIn .25s ease; }
.modal { position: absolute; left: 50%; top: 50%; width: 1140px; height: 800px; transform: translate(-50%, -50%); background: var(--a-card); border-radius: 14px; box-shadow: 0 30px 70px rgba(0,0,0,.35); padding: 26px 28px; display: flex; flex-direction: column; gap: 14px; animation: pop .3s cubic-bezier(.2,.8,.2,1); overflow: hidden; }
.drawer { position: absolute; right: 0; top: 0; bottom: 0; width: 760px; background: var(--a-card); box-shadow: -20px 0 50px rgba(0,0,0,.25); padding: 24px 26px; display: flex; flex-direction: column; gap: 14px; animation: slideIn .35s cubic-bezier(.2,.8,.2,1); overflow: hidden; }
.closex { position: absolute; right: 18px; top: 16px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; color: var(--a-text2); }
.closex:hover { background: var(--a-soft); }
.notif { position: absolute; right: 70px; top: 54px; width: 380px; z-index: 25; background: var(--a-card); border: 1px solid var(--a-line); border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,.18); overflow: hidden; display: none; animation: pop .22s ease; }
.notif.show { display: block; }
.nt { display: flex; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--a-line); font-size: 12.5px; color: var(--a-text2); }
.nt.new { background: var(--a-primary-soft); }
.nt b { display: block; color: var(--a-text); font-size: 13.5px; margin-bottom: 2px; }
.nt .ago { display: block; font-size: 11.5px; margin-top: 3px; color: var(--a-text3); }

/* Esteira dentro da licitação */
.steps { display: grid; grid-template-columns: repeat(12, 1fr); align-items: start; padding: 14px 10px 12px; border: 1px solid var(--a-line); border-radius: 12px; }
.st { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; font-size: 10px; line-height: 1.15; padding: 0 1px; letter-spacing: -.01em; color: var(--a-text3); position: relative; text-align: center; }
.st .dotc { position: relative; z-index: 1; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--a-soft); color: var(--a-text3); border: 1px solid var(--a-line); transition: background .35s, color .35s, transform .35s, border-color .35s; }
.st .dotc svg.i { width: 17px; height: 17px; }
.st.done { color: var(--a-green); }
.st.done .dotc { background: var(--a-step); border-color: var(--a-step); color: #fff; }
.st.cur .dotc { box-shadow: 0 0 0 4px rgba(22,196,127,.25); }
.st.next .dotc { border-color: var(--a-step); color: var(--a-step); }
.st.sel .dotc { transform: scale(1.12); }
.st + .st::before { content: ""; position: absolute; top: 18px; right: 50%; width: 100%; height: 2px; background: var(--a-line); transition: background .35s; }
.st.done + .st.done::before, .st.done + .st::before { background: var(--a-step); }
.st.done + .st:not(.done)::before { background: linear-gradient(90deg, var(--a-step), var(--a-line)); }
.prog { height: 8px; border-radius: 4px; background: var(--a-soft); overflow: hidden; }
.prog i { display: block; height: 100%; background: var(--a-primary); border-radius: 4px; transition: width .6s cubic-bezier(.2,.8,.2,1); }
.stabs { display: flex; gap: 6px; flex-wrap: nowrap; overflow: hidden; border-bottom: 1px solid var(--a-line); padding-bottom: 10px; }
.stabs button { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; padding: 6px 10px; border-radius: 8px; color: var(--a-text2); white-space: nowrap; }
.stabs button.on { background: var(--a-primary-soft); color: var(--a-primary); font-weight: 600; }
.stabs button svg.i { width: 14px; height: 14px; }
.panel { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; animation: fadeIn .3s ease; }
.apv { border-radius: 10px; padding: 12px 16px; display: flex; align-items: center; gap: 14px; border: 1px solid; }
.apv .n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 2px solid; font-weight: 700; font-size: 13px; }
.ck { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px; background: var(--a-soft); font-size: 13px; }
.ck svg.i { width: 16px; height: 16px; }

/* Linha do tempo do contrato */
.tl-m { font: 600 11.5px var(--f-sans); color: var(--a-text2); display: flex; justify-content: space-between; margin-top: 4px; }
.tl { display: flex; gap: 12px; border: 1px solid var(--a-line); border-radius: 10px; padding: 10px 14px; align-items: center; }
.tl .ic2 { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; background: var(--a-primary-soft); color: var(--a-primary); flex: none; }
.tl b { font-size: 13.5px; display: block; }
.tl small { font-size: 11.5px; color: var(--a-text2); }
.tl .v { margin-left: auto; text-align: right; font-weight: 700; font-size: 14px; }
.tl .v small { display: block; font: 500 10px var(--f-mono); letter-spacing: .06em; }

/* Toast e cursor do tour */
.a-toast { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(20px); opacity: 0; z-index: 40; background: #0F172A; color: #fff; font-size: 13.5px; padding: 11px 16px; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.25); transition: opacity .25s, transform .25s; pointer-events: none; white-space: nowrap; }
.a-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.cursor { position: absolute; left: 0; top: 0; z-index: 50; width: 26px; height: 26px; pointer-events: none; opacity: 0; transition: transform .8s cubic-bezier(.45,.05,.25,1), opacity .3s; filter: drop-shadow(0 2px 4px rgba(0,0,0,.35)); }
.cursor.show { opacity: 1; }
.cursor .ring { position: absolute; left: -10px; top: -10px; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--a-primary); opacity: 0; }
.cursor.tap .ring { animation: tap .45s ease-out; }

/* Dica "explore" após o tour */
.demo-hint { position: absolute; z-index: 3; left: 50%; bottom: 14px; transform: translateX(-50%); background: rgba(15, 23, 42, .86); color: #fff; font: 500 12.5px var(--f-sans); padding: 8px 14px; border-radius: 999px; pointer-events: none; opacity: 0; transition: opacity .4s; white-space: nowrap; }
.demo-hint.show { opacity: 1; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: translate(-50%, -48%) scale(.98); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.notif { animation-name: fadeIn; }
@keyframes slideIn { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes tap { from { opacity: .9; transform: scale(.4); } to { opacity: 0; transform: scale(1.6); } }

@media (max-width: 760px) {
  .demo { border-radius: 8px; }
  .demo-hint { font-size: 11px; bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .cursor, .prog i, .st .dotc { transition: none; }
  .modal, .drawer, .panel, .ov .scrim { animation: none; }
}