/* Simulações da página Gestão — recriação das telas reais do painel (dados fictícios). */
.g-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.g-h h3 { margin: 0; font-size: 19px; }
.g-h small { display: block; color: #6b7280; font-size: 11px; margin-top: 2px; }
.g-seg { display: inline-flex; gap: 3px; background: #f1f5f9; border-radius: 9px; padding: 3px; }
.g-seg span { font-size: 11px; padding: 5px 11px; border-radius: 7px; color: #475569; }
.g-seg span.on { background: #fff; color: #111827; font-weight: 700; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.g-seg--brand span.on { background: #dc2626; color: #fff; }
.g-pill { font-size: 10.5px; border-radius: 999px; padding: 3px 9px; border: 1px solid #e5e7eb; background: #fff; white-space: nowrap; }
.g-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.g-up { color: #16a34a; font-size: 10.5px; font-weight: 700; }
.g-down { color: #dc2626; font-size: 10.5px; font-weight: 700; }
.g-num { font-variant-numeric: tabular-nums; }
.g-novo { animation: gNovo 1.4s ease-out both; }
@keyframes gNovo { 0% { transform: scale(.94); box-shadow: 0 0 0 0 rgba(245,158,11,.6); } 60% { transform: scale(1.02); box-shadow: 0 0 0 8px rgba(245,158,11,0); } 100% { transform: none; } }
.g-toast { position: absolute; right: 18px; top: 58px; z-index: 6; background: #111827; color: #fff; border-radius: 12px; padding: 10px 14px; font-size: 12px; font-weight: 600; box-shadow: 0 14px 30px -10px rgba(0,0,0,.45); animation: skIn .35s ease-out both; }

/* ===== Resumo do dia (dashboard) ===== */
.g-live { display: grid; grid-template-columns: auto 1fr 1fr 1.6fr; gap: 14px; align-items: center; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px 14px; }
.g-live__tag { font-size: 10px; font-weight: 700; color: #15803d; background: #dcfce7; border-radius: 999px; padding: 3px 9px; }
.g-live__tag::before { content: "● "; animation: gBlink 1.2s infinite; }
@keyframes gBlink { 50% { opacity: .3; } }
.g-live b { display: block; font-size: 26px; line-height: 1.1; }
.g-live small { font-size: 10.5px; color: #6b7280; }
.g-live ul { margin: 0; padding: 0; list-style: none; font-size: 10.5px; color: #374151; display: grid; gap: 3px; }
.g-live li span { float: right; font-weight: 700; }
.g-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.g-kpi { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 10px 12px; position: relative; }
.g-kpi small { display: block; font-size: 10.5px; color: #4b5563; }
.g-kpi b { display: block; font-size: 19px; margin: 3px 0 1px; }
.g-kpi i { position: absolute; right: 10px; top: 9px; font-style: normal; font-size: 13px; }
.g-charts { display: grid; grid-template-columns: 1.45fr 1fr; gap: 10px; flex: 1; min-height: 0; }
.g-chart { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; min-height: 0; }
.g-chart h5 { margin: 0; font-size: 12.5px; }
.g-chart small { font-size: 10px; color: #6b7280; }
.g-chart svg { flex: 1; min-height: 0; width: 100%; margin-top: 6px; }
.g-legend { display: flex; gap: 12px; font-size: 10px; color: #4b5563; margin-top: 4px; }
.g-legend i { display: inline-block; width: 10px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 4px; }

/* ===== Pedidos em colunas ===== */
.g-kb { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.g-col { border: 2px solid; border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 7px; min-height: 0; overflow: hidden; }
.g-col h6 { margin: 0 0 2px; font-size: 11.5px; display: flex; justify-content: space-between; align-items: center; }
.g-col h6 span { font-size: 10px; border-radius: 999px; padding: 1px 7px; background: rgba(255,255,255,.8); }
.g-col--pend { border-color: #99f6e4; background: #f0fdfa; } .g-col--pend h6 { color: #024a51; }
.g-col--prep { border-color: #fed7aa; background: #fff7ed; } .g-col--prep h6 { color: #9a3412; }
.g-col--pronto { border-color: #bbf7d0; background: #f0fdf4; } .g-col--pronto h6 { color: #166534; }
.g-col--saiu { border-color: #e9d5ff; background: #faf5ff; } .g-col--saiu h6 { color: #6b21a8; }
.g-col--fim { border-color: #e2e8f0; background: #f8fafc; } .g-col--fim h6 { color: #475569; }
.g-ped { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 8px; font-size: 10.5px; display: grid; gap: 3px; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.g-ped .t { display: flex; justify-content: space-between; align-items: center; gap: 4px; }
.g-ped .t b { font-size: 12px; }
.g-ped .c { font-weight: 600; font-size: 11px; }
.g-ped .i { color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-ped .v { display: flex; justify-content: space-between; align-items: center; }
.g-ped .v b { font-size: 11.5px; }
.g-ped .bt { margin-top: 3px; text-align: center; border-radius: 7px; padding: 5px; font-weight: 700; color: #fff; background: #dc2626; }
.g-ped .bt--claro { background: #fff; color: #374151; border: 1px solid #d1d5db; }
.g-canal { font-size: 9px; font-weight: 700; border-radius: 999px; padding: 1px 6px; }
.g-canal--delivery { background: #ccfbf1; color: #024a51; }
.g-canal--retirada { background: #fef3c7; color: #92400e; }
.g-canal--mesa { background: #dcfce7; color: #166534; }
.g-canal--drive { background: #cffafe; color: #155e75; }
.g-canal--whats { background: #d1fae5; color: #065f46; }

/* ===== PDV ===== */
.g-pdv { display: flex; flex-direction: column; height: 100%; background: #f9fafb; position: relative; }
.g-pdv-h { display: flex; align-items: center; gap: 14px; background: #fff; border-bottom: 1px solid #e5e7eb; padding: 8px 14px; font-size: 10.5px; }
.g-pdv-h b { font-size: 13px; color: #1f2937; display: block; }
.g-pdv-h .blk { border-left: 1px solid #e5e7eb; padding-left: 12px; color: #6b7280; }
.g-pdv-h .blk strong { display: block; color: #111827; font-size: 11.5px; }
.g-pdv-h .r { margin-left: auto; display: flex; gap: 6px; }
.g-pdv-h .r span { color: #fff; border-radius: 8px; padding: 6px 10px; font-weight: 700; }
.g-pdv-tabs { display: flex; background: #fff; border-bottom: 1px solid #e5e7eb; }
.g-pdv-tabs span { padding: 10px 18px; font-size: 12px; color: #6b7280; border-bottom: 2px solid transparent; }
.g-pdv-tabs span.on { color: #dc2626; border-color: #dc2626; background: #fceeee; font-weight: 700; }
.g-pdv-ctx { background: #f8fafc; border-bottom: 1px solid #e5e7eb; padding: 7px 14px; display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; font-weight: 600; color: #1e293b; }
.g-pdv-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 34%; }
.g-cat { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow: hidden; }
.g-search { background: #fff; border: 1px solid #d1d5db; border-radius: 10px; padding: 8px 10px; font-size: 11px; color: #9ca3af; }
.g-chips { display: flex; gap: 5px; }
.g-chips span { font-size: 10.5px; border-radius: 999px; padding: 4px 10px; background: #f3f4f6; color: #4b5563; }
.g-chips span.on { background: #0f766e; color: #fff; }
.g-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.g-prod { background: #fff; border: 1px solid #e5e7eb; border-radius: 9px; padding: 6px; font-size: 10px; }
.g-prod img { display: block; width: 100%; aspect-ratio: 1.3; object-fit: cover; border-radius: 6px; background: #f3f4f6; }
.g-prod b { display: block; margin-top: 4px; font-weight: 600; color: #1f2937; line-height: 1.25; }
.g-prod span { color: #16a34a; font-weight: 800; }
.g-prod.hit { border-color: #5eead4; box-shadow: 0 0 0 3px rgba(15,118,110,.15); }
.g-cart { background: #fff; border-left: 1px solid #e5e7eb; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.g-cart h5 { margin: 0 0 4px; font-size: 13px; display: flex; gap: 6px; align-items: center; }
.g-cart h5 em { font-style: normal; font-size: 10px; background: #ccfbf1; color: #024a51; border-radius: 999px; padding: 1px 7px; }
.g-item { display: grid; grid-template-columns: 18px 1fr auto auto; gap: 6px; align-items: center; background: #f9fafb; border: 1px solid #f3f4f6; border-radius: 8px; padding: 6px; font-size: 10.5px; }
.g-item > i { font-style: normal; width: 18px; height: 18px; border-radius: 4px; background: #ccfbf1; color: #024a51; display: grid; place-items: center; font-weight: 700; font-size: 10px; }
.g-item small { display: block; color: #475569; font-size: 9.5px; }
.g-item .q { display: flex; gap: 3px; align-items: center; }
.g-item .q span { width: 16px; height: 16px; border-radius: 4px; background: #e5e7eb; display: grid; place-items: center; font-size: 10px; }
.g-tot { margin-top: auto; border-top: 1px solid #e5e7eb; padding-top: 7px; font-size: 11px; display: grid; gap: 3px; }
.g-tot div { display: flex; justify-content: space-between; color: #6b7280; }
.g-tot div.t { color: #111827; font-weight: 800; font-size: 14px; }
.g-bt { border-radius: 9px; padding: 9px; text-align: center; font-weight: 700; font-size: 12px; }
.g-bt--p { background: #dc2626; color: #fff; }
.g-bt--s { background: #fff; color: #1e293b; border: 1px solid #cbd5e1; }

.g-dim { position: absolute; inset: 0; background: rgba(15,23,42,.45); display: grid; place-items: center; z-index: 5; }
.g-modal { width: 640px; max-height: 92%; background: #fff; border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 30px 70px -20px rgba(0,0,0,.55); font-size: 11.5px; }
.g-modal__h { padding: 12px 16px; border-bottom: 1px solid #e5e7eb; display: flex; justify-content: space-between; align-items: center; }
.g-modal__h b { font-size: 16px; }
.g-modal__b { padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.g-modal__f { padding: 10px 16px; border-top: 1px solid #e5e7eb; display: flex; justify-content: space-between; gap: 8px; background: #f9fafb; }
.g-steps { display: flex; gap: 5px; padding: 8px 16px; background: #f8fafc; border-bottom: 1px solid #e5e7eb; }
.g-steps span { font-size: 10px; border-radius: 999px; padding: 3px 9px; border: 1px solid #cbd5e1; background: #fff; }
.g-steps span.ok { background: #ecfdf5; border-color: #6ee7b7; color: #065f46; }
.g-steps span.on { background: #dc2626; border-color: #dc2626; color: #fff; font-weight: 700; }
.g-total { border: 1px solid #e2e8f0; border-radius: 12px; padding: 10px 12px; display: flex; justify-content: space-between; align-items: center; }
.g-total small { font-size: 10.5px; letter-spacing: .06em; color: #475569; }
.g-total b { font-size: 26px; }
.g-formas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.g-forma { border: 2px solid #e2e8f0; border-radius: 12px; padding: 8px; display: flex; gap: 8px; align-items: center; }
.g-forma i { width: 30px; height: 30px; border-radius: 50%; background: #f1f5f9; display: grid; place-items: center; font-style: normal; flex: 0 0 auto; }
.g-forma b { display: block; font-size: 12px; }
.g-forma small { font-size: 9.5px; color: #64748b; }
.g-forma.on { border-color: #dc2626; background: #fceeee; }
.g-forma.on i { background: #dc2626; color: #fff; }
.g-recebido { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: stretch; }
.g-recebido .inp { border: 1px solid #cbd5e1; border-radius: 10px; padding: 9px 12px; text-align: right; font-size: 20px; font-weight: 700; }
.g-quick { display: flex; gap: 5px; margin-top: 6px; }
.g-quick span { border: 1px solid #cbd5e1; border-radius: 8px; padding: 5px 8px; font-size: 10.5px; }
.g-quick span.on { background: #fceeee; font-weight: 800; box-shadow: 0 0 0 2px #111827 inset; }
.g-troco { border: 2px solid #34d399; background: #ecfdf5; border-radius: 12px; padding: 10px; text-align: center; color: #065f46; }
.g-troco b { display: block; font-size: 30px; }

/* drive */
.g-dkb { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 10px 12px; }
.g-dcol { border: 2px solid; border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 7px; overflow: hidden; }
.g-dcol h6 { margin: 0; font-size: 11.5px; }
.g-dcard { background: #fff; border-radius: 9px; border-left: 4px solid; padding: 8px; font-size: 10.5px; display: grid; gap: 4px; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.g-dcard .t { display: flex; align-items: center; gap: 5px; }
.g-dcard .t b { font-size: 18px; font-weight: 900; }
.g-dcard .t em { margin-left: auto; font-style: normal; color: #475569; font-size: 10px; }
.g-dcard .st { justify-self: start; font-size: 9.5px; border: 1px solid; border-radius: 999px; padding: 1px 7px; }
.g-dcard .act { text-align: center; color: #fff; background: #dc2626; border-radius: 7px; padding: 5px; font-weight: 700; }

/* ===== Caixa ===== */
.g-modal__h--caixa { background: linear-gradient(90deg, #dc2626, #ea580c); color: #fff; }
.g-modal__h--caixa small { display: block; color: #fee2e2; font-size: 11px; }
.g-modal__h--ok { background: linear-gradient(90deg, #16a34a, #059669); color: #fff; }
.g-modal__h--ok small { display: block; color: #dcfce7; font-size: 11px; }
.g-gaveta { background: #f0fdfa; border-radius: 12px; padding: 10px; }
.g-gaveta h6 { margin: 0 0 8px; font-size: 12px; }
.g-gaveta .mini { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.g-gaveta .mini div { background: #fff; border-radius: 8px; padding: 6px; text-align: center; }
.g-gaveta .mini small { display: block; font-size: 9.5px; color: #6b7280; }
.g-gaveta .mini b { font-size: 12.5px; }
.g-campo label { display: block; font-weight: 600; font-size: 11px; margin-bottom: 4px; }
.g-campo .inp { border: 1px solid #d1d5db; border-radius: 8px; padding: 7px 10px; font-size: 13px; font-weight: 700; }
.g-campo small { display: block; margin-top: 3px; font-size: 10px; color: #6b7280; }
.g-formas-caixa { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.g-lf { border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; }
.g-lf div { display: grid; grid-template-columns: 1fr 90px 90px 110px; gap: 8px; padding: 7px 10px; border-bottom: 1px solid #f3f4f6; align-items: center; }
.g-lf div:last-child { border-bottom: 0; }
.g-lf div.h { background: #f9fafb; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: #6b7280; }
.g-lf small { display: block; font-size: 9.5px; color: #6b7280; }
.g-lf span { text-align: right; font-variant-numeric: tabular-nums; }
.g-ok { color: #15803d; font-weight: 700; }
.g-falta { color: #b91c1c; font-weight: 700; }
.g-prov { color: #065f46; font-weight: 700; }
.g-infos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.g-infos div { border-radius: 10px; padding: 8px 10px; }
.g-infos small { display: block; font-size: 9.5px; color: #6b7280; }
.g-dif { border-radius: 10px; padding: 10px 12px; display: flex; justify-content: space-between; font-weight: 800; }
.g-conf-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.g-conf-chips span { font-size: 10px; border-radius: 999px; padding: 3px 9px; border: 1px solid #e5e7eb; background: #fff; }
.g-conf-chips span.a { background: #fffbeb; border-color: #fcd34d; color: #92400e; }
.g-tab2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.g-t { width: 100%; border-collapse: collapse; font-size: 10.5px; }
.g-t th { text-align: left; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: #6b7280; background: #f9fafb; padding: 6px 8px; }
.g-t td { padding: 6px 8px; border-top: 1px solid #f3f4f6; }
.g-t td.n, .g-t th.n { text-align: right; font-variant-numeric: tabular-nums; }
.g-sit { font-size: 9.5px; border-radius: 6px; padding: 2px 7px; border: 1px solid #e5e7eb; }
.g-sit--ok { background: #f0fdf4; border-color: #bbf7d0; color: #14532d; }
.g-sit--div { background: #fffbeb; border-color: #fcd34d; color: #92400e; }

/* ===== Financeiro ===== */
.g-fin-hoje { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px 14px; display: flex; justify-content: space-between; gap: 14px; }
.g-fin-hoje b { display: block; font-size: 30px; line-height: 1.1; }
.g-fin-hoje .cmp { text-align: right; font-size: 11px; display: grid; gap: 6px; }
.g-fin-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.g-fin-kpis div { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 10px 12px; }
.g-fin-kpis small { display: block; font-size: 10.5px; color: #6b7280; }
.g-fin-kpis b { display: block; font-size: 18px; margin: 3px 0; }
.g-fin-kpis span { font-size: 10px; color: #6b7280; }
.g-meta { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px 14px; }
.g-meta b { font-size: 18px; }
.g-bar { height: 9px; border-radius: 6px; background: #e5e7eb; overflow: hidden; margin: 8px 0 6px; }
.g-bar i { display: block; height: 100%; background: #16a34a; border-radius: 6px; transition: width .8s ease; }
.g-meta .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.g-meta .cols div { background: #f9fafb; border-radius: 9px; padding: 8px 10px; font-size: 10.5px; color: #4b5563; }
.g-meta .cols b { display: block; font-size: 15px; color: #111827; }
.g-alerta { display: flex; align-items: center; gap: 9px; padding: 8px 12px; border-bottom: 1px solid #f3f4f6; font-size: 11px; }
.g-alerta:last-child { border-bottom: 0; }
.g-alerta span:last-child { margin-left: auto; }

/* ===== Atendimento (inbox) ===== */
.ib { display: flex; flex-direction: column; height: 100%; padding: 10px 12px; gap: 8px; }
.ib-title { font-size: 16px; font-weight: 800; display: flex; align-items: center; gap: 6px; }
.ib-cols { flex: 1; min-height: 0; display: grid; grid-template-columns: 285px 1fr 245px; gap: 9px; }
.ib-list, .ib-panel { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
.ib-list-h { padding: 9px; border-bottom: 1px solid #e5e7eb; display: grid; gap: 7px; }
.ib-list-h .t { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 13px; }
.ib-list-h .t em { font-style: normal; font-size: 10px; background: #f5f5f5; border-radius: 999px; padding: 1px 7px; margin-left: 4px; }
.ib-prox { background: #dc2626; color: #fff; border-radius: 7px; padding: 6px; text-align: center; font-weight: 700; font-size: 11.5px; }
.ib-busca { border: 1px solid #e5e7eb; border-radius: 7px; padding: 6px 8px; font-size: 10.5px; color: #9ca3af; }
.ib-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.ib-tabs span { font-size: 10px; border-radius: 999px; padding: 3px 8px; background: #f5f5f5; color: #737373; display: inline-flex; align-items: center; gap: 4px; }
.ib-tabs span i { width: 6px; height: 6px; border-radius: 50%; }
.ib-tabs span em { font-style: normal; background: rgba(0,0,0,.08); border-radius: 999px; padding: 0 5px; font-weight: 700; }
.ib-tabs span.on { background: #dc2626; color: #fff; }
.ib-tabs span.on em { background: rgba(255,255,255,.25); }
.ib-row { display: grid; grid-template-columns: 32px 1fr; gap: 8px; padding: 7px 9px; border-bottom: 1px solid rgba(229,229,229,.6); position: relative; }
.ib-row.sel { background: #f3f4f6; box-shadow: inset 3px 0 0 #dc2626; }
.ib-av { width: 32px; height: 32px; border-radius: 50%; color: #fff; display: grid; place-items: center; font-size: 10.5px; font-weight: 700; position: relative; }
.ib-av::after { content: ""; position: absolute; left: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%; background: var(--dot, #9ca3af); box-shadow: 0 0 0 2px #fff; }
.ib-row .l1 { display: flex; align-items: center; gap: 5px; }
.ib-row .l1 b { font-size: 12px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ib-row .l1 time { font-size: 10px; color: #737373; }
.ib-row .l1 time.at { color: #b45309; font-weight: 700; }
.ib-row .l1 time.est { color: #b91c1c; font-weight: 700; }
.ib-unread { min-width: 17px; height: 17px; border-radius: 9px; background: #dc2626; color: #fff; font-size: 9.5px; font-weight: 700; display: grid; place-items: center; padding: 0 4px; }
.ib-row .l2 { font-size: 10.5px; color: #737373; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.ib-row .l2.un { color: #111827; font-weight: 600; }
.ib-chips { display: flex; gap: 3px; margin-top: 4px; flex-wrap: wrap; }
.ib-chip { border-radius: 999px; border: 1px solid; padding: 0 6px; font-size: 9.5px; line-height: 15px; font-weight: 500; }
.ib-chip--espera { background: #fffbeb; color: #78350f; border-color: #fde68a; }
.ib-chip--info { background: #f0fdfa; color: #025e67; border-color: #99f6e4; }
.ib-chip--ok { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.ib-chip--neutro { background: #f3f4f6; color: #374151; border-color: #e5e7eb; }
.ib-chip--urg { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.ib-chip--fila { color: #fff; border-color: transparent; }
.ib-conv { display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; border: 1px solid #e5e7eb; min-height: 0; }
.ib-head { background: #008069; color: #fff; padding: 7px 11px; display: flex; align-items: center; gap: 9px; }
.ib-head .av { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.2); display: grid; place-items: center; }
.ib-head b { font-size: 13px; }
.ib-head .st { font-size: 9.5px; border-radius: 999px; padding: 1px 7px; margin-left: 6px; color: #fff; vertical-align: 1px; }
.ib-head small { display: block; font-size: 10px; color: rgba(255,255,255,.85); }
.ib-head .acts { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.ib-head .prim { background: #fff; color: #007b6b; border-radius: 7px; padding: 5px 10px; font-weight: 700; font-size: 11px; }
.ib-head .gh { font-size: 10.5px; opacity: .9; }
.ib-msgs { flex: 1; min-height: 0; background: #efeae2; padding: 8px 14px; display: flex; flex-direction: column; justify-content: flex-end; gap: 5px; overflow: hidden; }
.ib-day { align-self: center; background: #f0f2f5; color: #54656f; font-size: 10px; border-radius: 999px; padding: 3px 10px; }
.ib-b { max-width: 72%; border-radius: 8px; padding: 5px 9px 4px; font-size: 11.5px; line-height: 1.38; color: #111b21; box-shadow: 0 1px .5px rgba(11,20,26,.13); }
.ib-b .lb { display: block; font-size: 9.5px; font-weight: 700; margin-bottom: 1px; }
.ib-b .tm { display: block; text-align: right; font-size: 9px; color: #667781; margin-top: 1px; }
.ib-b .tm .lido { color: #53bdeb; font-weight: 800; }
.ib-b--cli { background: #fff; align-self: flex-start; }
.ib-b--bot { background: #f1f5f9; align-self: flex-end; }
.ib-b--bot .lb { color: #334155; }
.ib-b--eq { background: #d9fdd3; align-self: flex-end; }
.ib-b--eq .lb { color: #025e67; }
.ib-nota { align-self: center; max-width: 76%; background: #fffbeb; border: 1px dashed #f59e0b; border-radius: 8px; padding: 6px 10px; font-size: 11px; }
.ib-nota b { display: block; font-size: 9.5px; color: #78350f; }
.ib-comp { background: #f0f2f5; padding: 7px 11px 9px; position: relative; }
.ib-seg { display: inline-flex; border-radius: 999px; background: rgba(0,0,0,.05); padding: 2px; font-size: 10px; }
.ib-seg span { padding: 3px 9px; border-radius: 999px; color: #54656f; }
.ib-seg span.on { background: #fff; color: #007b6b; font-weight: 700; }
.ib-seg span.nota { background: #fde68a; color: #451a03; font-weight: 700; }
.ib-in { display: flex; gap: 7px; align-items: flex-end; margin-top: 6px; }
.ib-box { flex: 1; background: #fff; border-radius: 8px; padding: 7px 10px; font-size: 11.5px; color: #9ca3af; min-height: 32px; }
.ib-box.tem { color: #111b21; }
.ib-box--nota { background: #fffbeb; border: 1px solid #fcd34d; }
.ib-send { width: 32px; height: 32px; border-radius: 50%; background: #00a884; color: #fff; display: grid; place-items: center; font-size: 13px; flex: 0 0 auto; }
.ib-qr { position: absolute; left: 11px; right: 50px; bottom: 50px; background: #fff; border-radius: 8px; box-shadow: 0 12px 30px -10px rgba(0,0,0,.35); overflow: hidden; font-size: 10.5px; }
.ib-qr header { background: #f9fafb; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: #6b7280; padding: 5px 9px; }
.ib-qr div { padding: 6px 9px; border-top: 1px solid #f3f4f6; }
.ib-qr div.on { background: #ecfdf5; }
.ib-qr div b { color: #007b6b; margin-right: 6px; }
.ib-qr div span { color: #374151; }
.ib-panel { font-size: 11px; }
.ib-strip { padding: 10px; border-bottom: 1px solid #e5e7eb; }
.ib-strip .nm { display: flex; gap: 8px; align-items: center; }
.ib-strip .nm .ib-av { width: 38px; height: 38px; font-size: 12px; }
.ib-strip .nm b { font-size: 13px; display: block; }
.ib-strip .bdg { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.ib-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 8px; }
.ib-stats small { display: block; font-size: 9.5px; color: #737373; }
.ib-stats b { font-size: 12px; }
.ib-ped { margin-top: 8px; background: #f9fafb; border-radius: 8px; padding: 7px; font-size: 10.5px; display: grid; gap: 3px; }
.ib-ptabs { display: flex; border-bottom: 1px solid #e5e7eb; }
.ib-ptabs span { flex: 1; text-align: center; padding: 7px 0; font-size: 10.5px; color: #6b7280; border-bottom: 2px solid transparent; }
.ib-ptabs span.on { color: #dc2626; border-color: #dc2626; font-weight: 700; }
.ib-sec { padding: 8px 10px; border-bottom: 1px solid #f3f4f6; }
.ib-sec h6 { margin: 0 0 4px; font-size: 10.5px; }
.ib-sec p { margin: 2px 0; color: #4b5563; font-size: 10.5px; }
.ib-hist div { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid #f3f4f6; font-size: 10.5px; }

/* ===== Carrinhos ===== */
.g-cr-nav { display: flex; gap: 2px; border-bottom: 1px solid #e5e7eb; background: #fff; margin: -14px -16px 0; padding: 0 16px; }
.g-cr-nav span { font-size: 11px; padding: 8px 11px; color: #4b5563; border-radius: 6px 6px 0 0; }
.g-cr-nav span.on { background: #f97316; color: #fff; font-weight: 700; }
.g-cr-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.g-cr-kpis div { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 10px 12px; }
.g-cr-kpis small { display: block; font-size: 11px; font-weight: 600; }
.g-cr-kpis b { display: block; font-size: 22px; margin: 4px 0 1px; }
.g-cr-kpis span { font-size: 10px; color: #737373; }
.g-funil { display: flex; gap: 5px; align-items: center; font-size: 10.5px; }
.g-funil span { border: 1px solid #e5e7eb; border-radius: 7px; padding: 4px 8px; background: #fff; }
.g-funil span.on { background: #dc2626; border-color: #dc2626; color: #fff; }
.g-funil span i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 4px; }
.g-cart-row { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 9px 12px; display: flex; align-items: center; gap: 10px; }
.g-cart-row .ci { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; }
.g-cart-row .tx { flex: 1; min-width: 0; font-size: 11px; color: #6b7280; }
.g-cart-row .tx b { color: #111827; font-size: 12px; margin-right: 6px; }
.g-step { font-size: 9.5px; color: #fff; border-radius: 6px; padding: 1px 6px; font-weight: 700; }
.g-cart-row .rec { background: #f97316; color: #fff; border-radius: 8px; padding: 7px 12px; font-weight: 700; font-size: 11px; }
.g-cart-row .rec--o { background: #fff; color: #374151; border: 1px solid #d1d5db; }
.g-cart-exp { margin: -6px 0 0; background: #f9fafb; border: 1px solid #e5e7eb; border-top: 0; border-radius: 0 0 10px 10px; padding: 9px 12px; font-size: 10.5px; display: grid; gap: 6px; }
.g-hist { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 7px 9px; display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.g-hist .s { color: #fff; border-radius: 5px; padding: 1px 6px; font-size: 9.5px; font-weight: 700; }

/* ===== Roleta ===== */
.g-rol { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 300px; gap: 10px; }
.g-premio { display: grid; grid-template-columns: 34px 1fr auto; gap: 9px; align-items: center; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 8px 10px; font-size: 10.5px; }
.g-premio > i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 16px; }
.g-premio b { font-size: 12px; margin-right: 5px; }
.g-premio .ch { color: #6b7280; }
.g-sw { width: 28px; height: 16px; border-radius: 9px; background: #dc2626; position: relative; }
.g-sw::after { content: ""; position: absolute; right: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; }
.g-sw.off { background: #d1d5db; } .g-sw.off::after { right: auto; left: 2px; }
.g-wheel-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.g-wheel-card svg { width: 230px; height: 230px; }
.g-wheel { transform-origin: 50% 50%; }
.g-wheel.gira { animation: gGira 4s cubic-bezier(.12,.6,.15,1) both; }
@keyframes gGira { from { transform: rotate(0); } to { transform: rotate(1530deg); } }
.g-rbar { display: grid; grid-template-columns: 120px 1fr 40px; gap: 8px; align-items: center; font-size: 11px; padding: 5px 0; }
.g-rbar div { height: 9px; border-radius: 5px; background: #f3f4f6; overflow: hidden; }
.g-rbar i { display: block; height: 100%; border-radius: 5px; }

/* ===== Relatório executivo ===== */
.g-re { display: grid; grid-template-columns: 1fr 380px; gap: 12px; flex: 1; min-height: 0; }
.g-re-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.g-re-kpis div { border: 1px solid #e5e7eb; border-radius: 9px; padding: 9px; background: #fff; }
.g-re-kpis small { display: block; font-size: 10px; color: #4b5563; }
.g-re-kpis b { font-size: 17px; display: block; }
.g-re-kpis span { font-size: 9.5px; color: #6b7280; }
.g-selo { font-size: 10.5px; border-radius: 999px; padding: 2px 9px; border: 1px solid; font-weight: 600; }
.g-selo--ok { background: #ecfdf5; border-color: #6ee7b7; color: #064e3b; }
.g-wa { background: #efeae2; border-radius: 10px; padding: 12px; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.g-wa__b { background: #fff; border-radius: 8px; border-top-left-radius: 0; padding: 8px 10px; font-size: 11px; line-height: 1.5; color: #111b21; white-space: pre-wrap; box-shadow: 0 1px 2px rgba(0,0,0,.12); overflow: hidden; }
.g-wa__b b { font-weight: 700; }
.g-wa__b i { color: #54656f; }
.g-wa__t { text-align: right; font-size: 9.5px; color: #667781; margin-top: 2px; }

/* ===== página ===== */
.gs-hero { text-align: center; }
.gs-hero .phero__lead { margin-inline: auto; max-width: 62ch; }
.gs-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 22px; }
.gs-nav a { font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--ink-15); background: #fff; color: var(--ink-70); }
.gs-nav a:hover { border-color: var(--accent); color: var(--ink); }
.gs-sec { scroll-margin-top: 90px; }
.gs-sim { max-width: 1100px; margin: 0 auto; }
.gs-bul { list-style: none; margin: 22px auto 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; max-width: 900px; }
.gs-bul li { position: relative; padding-left: 26px; color: var(--ink-70); font-size: 14.5px; }
.gs-bul li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 19px; height: 19px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.gs-mais { text-align: center; margin: 18px 0 0; }
.gs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.gs-grid article { background: #fff; border: 1px solid var(--ink-08); border-radius: 18px; padding: 18px; }
.gs-grid i { font-style: normal; font-size: 22px; width: 42px; height: 42px; border-radius: 12px; background: var(--accent-tint); display: grid; place-items: center; }
.gs-grid h3 { margin: 12px 0 6px; font-size: 17px; }
.gs-grid p { margin: 0; color: var(--ink-70); font-size: 14.5px; line-height: 1.5; }
.gs-int { margin-top: 28px; text-align: center; }
.gs-int h3 { margin: 0 0 12px; font-size: 18px; }
.gs-int__logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.gs-int__logos span { background: #fff; border: 1px solid var(--ink-08); border-radius: 12px; padding: 9px 14px; font-weight: 600; font-size: 14px; }
.gs-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
.gs-link { display: flex; flex-direction: column; gap: 4px; background: var(--ink); color: #fff; border-radius: 16px; padding: 16px; }
.gs-link span { font-size: 13.5px; opacity: .78; }
.gs-link:hover { background: var(--accent); }
@media (max-width: 960px) { .gs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gs-links { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .gs-grid, .gs-links { grid-template-columns: 1fr; } }