/* Ajuda ilustrada (ajuda.js) + cartão Conexões do perfil da loja — 29/10 */

/* botão "?" */
.vz-ajuda { width: 22px; height: 22px; flex: none; border-radius: 50%; border: 1.5px solid var(--roxo); background: #fff; color: var(--roxo); font: 800 12.5px/1 'Instrument Sans', system-ui, sans-serif; display: inline-grid; place-items: center; cursor: pointer; padding: 0; }
.vz-ajuda:hover, .vz-ajuda:focus-visible { background: var(--roxo); color: #fff; outline: none; }

/* janela da ajuda — fica por cima de qualquer modal */
.aj-fundo { position: fixed; inset: 0; z-index: 1000; background: rgba(17,19,24,.45); display: flex; justify-content: center; align-items: flex-start; padding: 32px 16px; overflow: auto; }
.aj-guia { background: #fff; border-radius: 22px; width: 100%; max-width: 780px; padding: 24px; display: flex; flex-direction: column; gap: 20px; box-shadow: 0 30px 80px rgba(0,0,0,.2); }
.aj-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.aj-cab h2 { font-size: 24px; margin: 4px 0 0; }
.aj-eye { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--roxo); }
.aj-mini { font-size: 13px; color: var(--cinza); margin: 6px 0 0; }
.aj-passo { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 18px; border-top: 2px solid var(--tinta); padding-top: 16px; }
.aj-passo h3 { font-size: 16px; margin: 4px 0 0; }
.aj-passo p { margin: 6px 0 0; color: var(--tinta-2); }
.aj-num { font-size: 36px; font-weight: 700; color: var(--roxo); line-height: 1; }
.aj-tela { position: relative; border: 1px dashed #D9DBE0; border-radius: 14px; padding: 14px; background: #FAFAFB; display: flex; flex-direction: column; gap: 8px; align-self: start; }
.aj-rot { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--cinza); }
.aj-linha { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.aj-linha .btn { pointer-events: none; }
.aj-seta { color: var(--roxo); font-weight: 800; }
.aj-msg { background: #E7F7EE; border-radius: 10px; padding: 9px 11px; font-size: 12px; }
.aj-ext { border-radius: 10px; padding: 14px; display: grid; place-items: center; }
.aj-cx { background: #fff; border-radius: 7px; width: 100%; max-width: 240px; padding: 12px; display: flex; flex-direction: column; gap: 6px; font-size: 11.5px; }
.aj-logo { font-size: 18px; text-align: center; }
.aj-c { text-align: center; }
.aj-campo { border: 1px solid #DDD; border-radius: 5px; padding: 6px 8px; }
.aj-campo.ruim { border-color: var(--vermelho); background: var(--vermelho-claro); color: var(--vermelho); text-decoration: line-through; }
.aj-campo.bom { border-color: var(--verde); background: var(--verde-claro); color: var(--verde); font-weight: 700; }
.aj-bt { align-self: flex-end; background: #2E9E5B; color: #fff; border-radius: 5px; padding: 5px 12px; font-weight: 700; }
.aj-selo { position: absolute; right: -6px; bottom: 16px; background: var(--roxo); color: #fff; font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 999px; }
.aj-cx-sis { background: #fff; border: 1px solid #CDEBD8; border-radius: 12px; padding: 10px 12px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.aj-cx-sis.ruim { border-color: #F5C2BC; }
.aj-compara { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.aj-lado { border-radius: 12px; padding: 10px 12px; font-size: 13px; }
.aj-lado h4 { margin: 0 0 4px; font-size: 13px; }
.aj-lado ul { margin: 0; padding-left: 18px; }
.aj-lado.e { background: var(--vermelho-claro); } .aj-lado.e h4 { color: var(--vermelho); }
.aj-lado.c { background: var(--verde-claro); } .aj-lado.c h4 { color: var(--verde); }
.aj-nota { background: var(--roxo-claro); border-radius: 12px; padding: 12px 14px; font-size: 13.5px; }
.aj-nota b { color: var(--roxo-escuro); }
@media (max-width: 640px) { .aj-passo { grid-template-columns: 1fr; } .aj-guia { padding: 18px; } }

/* cartão Conexões do perfil (no lugar do antigo cartão Solicitações) */
.pc-conex { gap: 0; padding: 14px 16px; }
.pc-conex .pc-lbl { margin-bottom: 4px; }
.pc-cx { width: 100%; display: flex; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid var(--linha-2); min-width: 0; }
.pc-cx:first-of-type { border-top: 0; }
.pc-cx > img { flex: none; }
.pc-cx-nome { font-weight: 700; font-size: 13.5px; flex: none; width: 76px; }
.pc-cx-est { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pc-cx-est .chip { align-self: flex-start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.pc-cx-est small { font-size: 11.5px; color: var(--cinza); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-cx .btn { min-height: 0; padding: 5px 10px; font-size: 12.5px; flex: none; }
.pc-cx-link { width: 100%; display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; margin: 2px 0 6px; background: var(--fundo); border-radius: 10px; }
.pc-cx-link .aj-linha .btn { pointer-events: auto; }
.pc-cx-link small { font-size: 11.5px; color: var(--cinza); }
.pc-lista-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 6px; }
.pc-lista-cab h2 { margin: 0; }
.pc-lista-cab h2 small { font-weight: 600; color: var(--cinza); font-size: 13px; }
.pc-lista-cab h2 small .atr { color: var(--vermelho); }
.aj-op { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--linha); border-radius: 10px; background: #fff; font-size: 12.5px; }
.aj-op i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #C9CCD3; flex: none; }
.aj-op.on { border-color: var(--roxo); font-weight: 700; } .aj-op.on i { border: 4px solid var(--roxo); }
.aj-alerta { background: #FFF4D6; border: 2px solid #F2B705; border-radius: 14px; padding: 14px 16px; font-size: 15px; line-height: 1.45; color: #5C4200; }
.aj-alerta b { color: #3D2C00; }
/* quadradinho da Planilha das lojas, desenhado na ajuda */
.aj-q { width: 26px; height: 26px; border-radius: 7px; display: inline-grid; place-items: center; font-weight: 800; font-size: 12px; }
.aj-q.ok { background: var(--verde-claro); color: var(--verde); } .aj-q.faz { background: #FFF1E6; color: var(--laranja-escuro); }
.aj-q.falta { background: var(--vermelho-claro); color: var(--vermelho); } .aj-q.na { background: #F4F3F7; color: var(--cinza); }
/* "?" ao lado do título das telas e dos modais */
.topo h1 .vz-ajuda, .modal-topo h2 .vz-ajuda { vertical-align: middle; margin-left: 8px; width: 24px; height: 24px; font-size: 13px; }