/* APPYON OPS · módulo Proxy
   Só o visual desta tela. Tokens (--ap-*) vêm da casca.
   PEÇA 2: colunas da checklist, radios "Como é aplicada", notas de gate. */

/* ===== COLUNAS DA LISTA PRINCIPAL ===== */
.ap-cols-p{grid-template-columns:1.3fr .9fr 1.5fr 1.3fr}
#ap-body#ap-body .ap-cols-p .ap-pill{white-space:normal}
.ap-tools .ap-legend{margin-left:0}

/* ===== PILLS DE STATUS (is-o e is-y: NÃO reverter) ===== */
#ap-body#ap-body .ap-pill.is-o{background:#FCE4CC;border-color:#C45E12;color:#8A3408;font-weight:700}
#ap-body#ap-body .ap-pill.is-y{background:var(--ap-cream);border-color:#B59A00;color:#5C4A00}
.ap-status-ctrl{display:flex;flex-wrap:wrap;gap:8px}
#ap-body#ap-body button.ap-status-btn{cursor:pointer;font:400 13px/1.4 var(--ap-sans)}
#ap-body#ap-body button.ap-status-btn.ap-pill:not(.is-active){background:#fff;border-style:dashed;color:var(--ap-t2);font-weight:400}
#ap-body#ap-body button.ap-status-btn.ap-pill:not(.is-active):hover{background:var(--ap-bg);color:var(--ap-tx)}
#ap-body#ap-body button.ap-status-btn.is-active{border-style:solid;font-weight:700;box-shadow:2px 2px 0 var(--ap-pet)}
#ap-body#ap-body button.ap-status-btn.is-active.is-g{background:var(--ap-gbg);color:var(--ap-gtx)}
#ap-body#ap-body button.ap-status-btn.is-active.is-b{background:var(--ap-bbg);color:var(--ap-btx)}
#ap-body#ap-body button.ap-status-btn.is-active.is-r{background:var(--ap-rbg);color:var(--ap-rtx)}
#ap-body#ap-body button.ap-status-btn.is-active.is-o{background:#FCE4CC;color:#8A3408}
#ap-body#ap-body button.ap-status-btn.is-active.is-y{background:var(--ap-cream);color:#5C4A00}
button.ap-status-btn:focus-visible{outline:2px solid var(--ap-pet);outline-offset:2px}

/* ===== CAMPOS (etapa 5: claros, no padrão do login) ===== */
#ap-sub-proxy input.ap-json,#ap-sub-proxy select,#ap-sub-proxy textarea.ap-motivo{
  box-sizing:border-box;display:block;width:100%;max-width:380px;margin:0 0 4px;padding:9px 12px;
  font:400 15px/1.3 var(--ap-sans);color:var(--ap-field-tx);-webkit-text-fill-color:var(--ap-field-tx);caret-color:var(--ap-field-tx);
  background:var(--ap-field-bg);border:1.5px solid var(--ap-field-bd);border-radius:var(--ap-r-sm);box-shadow:none;color-scheme:light}
#ap-sub-proxy textarea.ap-motivo{max-width:none}
#ap-sub-proxy input.ap-json:focus,#ap-sub-proxy select:focus,#ap-sub-proxy textarea.ap-motivo:focus{background:#fff;outline:2px solid var(--ap-field-focus);outline-offset:2px}
#ap-sub-proxy input.ap-json::placeholder,#ap-sub-proxy textarea::placeholder{color:var(--ap-t3)}
#ap-sub-proxy .ap-label>input[type="checkbox"]{accent-color:var(--ap-pet);width:16px;height:16px;vertical-align:-3px;margin:0 6px 0 0}
#ap-sub-proxy .ap-label{color:var(--ap-t2)}
#ap-sub-proxy .ap-label small{color:var(--ap-t3);font-size:12px}

/* ===== CARTEIRA ===== */
.ap-wallet{border:var(--ap-solid);border-radius:var(--ap-r-card);box-shadow:var(--ap-shadow);padding:20px 24px;display:flex;gap:14px 36px;align-items:flex-end;flex-wrap:wrap;background:#fff;color:var(--ap-tx);margin:0 4px 24px 0}
.ap-wallet.is-bad{border-color:var(--ap-pet);background:#fff;color:var(--ap-tx)}
.ap-wallet small{display:block;font-size:13px;color:var(--ap-t2);margin-bottom:6px}
#ap-body .ap-wallet .ap-big{display:block;font-family:var(--ap-mono);font-weight:700;font-size:clamp(28px,4vw,40px);line-height:1;letter-spacing:-.02em;color:var(--ap-coral)}
.ap-wallet-msg{flex:1;min-width:190px;font-size:14px}
.ap-wallet-msg:empty{display:none}
.ap-wallet.is-bad .ap-wallet-msg{background:var(--ap-rbg);border:1.5px solid var(--ap-rbd);color:var(--ap-rtx);border-radius:var(--ap-r-sm);padding:10px 14px}
.ap-wallet .ap-label{margin:0;flex:0 0 auto;align-self:center}
#ap-sub-proxy .ap-wallet input.ap-json{width:140px;margin:0}

/* ===== ALERTA ===== */
.ap-alert{border:1.5px solid var(--ap-rbd);background:var(--ap-rbg);color:var(--ap-rtx);border-radius:14px;padding:10px 14px;margin-top:12px;font-size:14px}

/* ===== CAMPO "COMO É APLICADA" ===== */
.ap-aplicada{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 18px;
  padding:10px 14px;
  background:var(--ap-bg);
  border:1.5px dashed var(--ap-pet);
  border-radius:14px;
  margin-bottom:14px;
}
.ap-aplicada-label{
  font-size:13px;
  color:var(--ap-t2);
  flex:0 0 100%;
  margin-bottom:2px;
}
.ap-radio{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:14px;
  cursor:pointer;
  padding:4px 10px;
  border-radius:10px;
  border:1.5px solid transparent;
  transition:border-color .15s, background .15s;
}
.ap-radio:hover{background:var(--ap-cream);border-color:var(--ap-pet)}
.ap-radio input[type="radio"]{
  appearance:none;
  -webkit-appearance:none;
  display:inline-grid;
  place-content:center;
  flex:none;
  width:18px;
  height:18px;
  border:1.5px solid var(--ap-pet);
  border-radius:50%;
  background:#fff;
  cursor:pointer;
  transition:background .15s, border-color .15s;
}
.ap-radio input[type="radio"]:checked{
  background:var(--ap-y, #F5D000);
  border-color:var(--ap-pet);
}
.ap-radio input[type="radio"]:checked::after{
  content:'';
  display:block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#000;
}
.ap-radio input[type="radio"]:focus-visible{outline:2px solid var(--ap-pet);outline-offset:2px}

/* ===== BLOCO DE CHECKLIST ===== */
.ap-cl-bloco{margin-bottom:16px}
.ap-cl-titulo{
  font-family:var(--ap-serif);
  font-size:21px;
  font-weight:400;
  line-height:1.1;
  color:var(--ap-tx);
  margin-bottom:8px;
  padding-left:2px;
}

/* Tabela 4 colunas: Passo · Nome · Quem faz · Estado */
.ap-cl-table{
  width:100%;
  border-collapse:collapse;
  border-spacing:0;
  color:var(--ap-tx);
  font-size:13px;
  line-height:1.4;
}
.ap-cl-table th{
  text-align:left;
  text-transform:lowercase;
  letter-spacing:0;
  font-size:12px;
  color:var(--ap-t2);
  font-weight:600;
  padding:4px 8px;
  border-bottom:1.5px solid var(--ap-pet);
  white-space:nowrap;
}
.ap-cl-table td{
  padding:9px 8px;
  vertical-align:middle;
  color:var(--ap-tx);
  background:transparent;
  border:0;
  border-bottom:1px dashed #b8c3c9;
  border-radius:0;
  white-space:normal;
}
.ap-cl-table tr:last-child td{border-bottom:none}
.ap-col-passo{width:40px;text-align:center;font-weight:700;color:var(--ap-t2);font-size:12px}
.ap-col-nome{font-weight:600;min-width:120px}
.ap-col-quem{color:var(--ap-t2);min-width:160px}
.ap-col-est{width:100px;text-align:center}

/* Linha de passo clicável */
.ap-cl-row{cursor:pointer;transition:background .15s}
.ap-cl-row:hover{background:var(--ap-cream, #FEFAE0)}
.ap-cl-row.is-open{background:var(--ap-cream, #FEFAE0)}
.ap-cl-row td.ap-col-est{cursor:default}

/* Linha com explicação do passo (oque) */
.ap-cl-oque[hidden]{display:none}
.ap-cl-oque td{
  padding:10px 14px 12px;
  background:var(--ap-cream, #FEFAE0);
  border-bottom:1.5px dashed var(--ap-pet);
  font-size:13px;
  line-height:1.5;
  color:var(--ap-tx);
}
.ap-col-oque{white-space:normal;overflow-wrap:break-word}

/* ===== HISTÓRICO DE TROCAS (ESTRUTURADO) ===== */
.ap-troca{display:flex;flex-direction:column;gap:6px}
.ap-troca-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px}
.ap-troca-corpo{display:flex;flex-direction:column;gap:4px}
.ap-troca-corpo .ap-kv{padding:3px 0;border-bottom:1px solid var(--ap-cream, #F5EFC0)}
.ap-troca-corpo .ap-kv:last-child{border-bottom:none}

/* ===== BOTÃO DE ESTADO ===== */
.ap-est{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font:400 13px/1.2 var(--ap-sans);
  padding:4px 12px 4px 5px;
  border-radius:var(--ap-r-pill);
  border:1.5px solid var(--ap-pet);
  cursor:pointer;
  background:#fff;
  color:var(--ap-tx);
  transition:background .15s;
  white-space:nowrap;
}
.ap-est:hover{background:var(--ap-bg)}
.ap-est:focus-visible{outline:2px solid var(--ap-pet);outline-offset:2px}
.ap-est:disabled{cursor:not-allowed;opacity:.7}
.ap-est.is-todo{border-style:dashed;color:var(--ap-t2)}
.ap-est.is-fail{background:var(--ap-rbg);border-color:var(--ap-rbd);color:var(--ap-rtx);font-weight:700}
#ap-body .ap-est .ap-check-dot{width:20px;height:20px;font-size:12px}
.ap-todo-dot{display:inline-block;flex:none;width:20px;height:20px;box-sizing:border-box;border-radius:50%;border:1.5px dashed var(--ap-pet);background:#fff}
.ap-fail-dot{display:inline-grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;background:var(--ap-rbd);color:#fff;font:700 11px/1 var(--ap-sans);font-style:normal}
.ap-ped-alerts{padding:0 20px 14px}
.ap-ped-alerts .ap-alert{margin-top:0}

/* ===== NOTA DE GATE ===== */
.ap-gate-note{
  font-size:13px;
  color:var(--ap-t2);
  background:var(--ap-cream, #FEFAE0);
  border:1.5px dashed var(--ap-pet);
  border-radius:10px;
  padding:7px 12px;
  margin-top:6px;
  line-height:1.5;
}
.ap-gate-note + .ap-gate-note{margin-top:5px}

/* ===== TESTE / FERRAMENTA ===== */
.ap-test-links{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin:10px 0 6px}
.ap-test-links a{color:var(--ap-pet);font-size:13px;font-weight:600;text-decoration:underline;text-decoration-style:dashed;text-underline-offset:3px;transition:opacity .15s}
.ap-test-links a:hover{opacity:.75}
.ap-label{display:block;margin:14px 0 6px;font-size:13px;color:var(--ap-t2)}
#ap-body#ap-body .ap-test textarea.ap-json{display:block;width:100%;min-height:120px;padding:10px 12px!important;resize:vertical;
  font-family:var(--ap-mono)!important;font-size:13px!important;line-height:1.45;background:#fff!important;color:var(--ap-tx)!important;
  border:1.5px dashed var(--ap-pet)!important;border-radius:14px!important;box-shadow:none!important}
#ap-body#ap-body .ap-test textarea.ap-json:focus{outline:2px solid var(--ap-pet);outline-offset:2px}
.ap-err{min-height:20px;margin-top:4px;font-size:13px;color:var(--ap-rtx)}
.ap-actions{display:flex;gap:10px;flex-wrap:wrap}
.ap-result{margin-top:12px}
.ap-result:empty{display:none}
.ap-verdict{border-radius:14px;padding:10px 14px;border:1.5px solid;font-weight:700;margin-bottom:10px}
.ap-verdict.is-g{background:var(--ap-gbg);border-color:var(--ap-gbd);color:var(--ap-gtx)}
.ap-verdict.is-b{background:var(--ap-bbg);border-color:var(--ap-bbd);color:var(--ap-btx)}
.ap-verdict.is-r{background:var(--ap-rbg);border-color:var(--ap-rbd);color:var(--ap-rtx)}
.ap-pre{white-space:pre-wrap;overflow-wrap:anywhere;background:#fff;border:1.5px dashed var(--ap-pet);border-radius:14px;padding:10px 12px;font:13px/1.45 var(--ap-mono);margin:8px 0}

/* ===== SE FALHAR E NOTA DE TROCA (PEÇA 7) ===== */
.ap-se-falhar{
  margin-top:8px;
  padding:8px 12px;
  background:#fff;
  border:1.5px dashed var(--ap-pet);
  border-radius:10px;
  font-size:13px;
  line-height:1.45;
  color:var(--ap-tx);
}
.ap-se-falhar + .ap-se-falhar{margin-top:6px}
.ap-se-falhar b{color:var(--ap-tx);font-weight:700}

.ap-troca-nota{
  font-size:13px;
  color:var(--ap-tx);
  background:var(--ap-cream, #FEFAE0);
  border:1.5px dashed var(--ap-pet);
  border-radius:10px;
  padding:10px 12px;
  margin-bottom:10px;
  line-height:1.5;
}
.ap-troca-nota p{margin:0 0 6px}
.ap-troca-nota p:last-child{margin-bottom:0}

.ap-wallet-regras{
  flex:1 0 100%;
  font-size:13px;
  line-height:1.4;
  margin-top:4px;
}
.ap-wallet-regras small{display:block;font-size:13px;color:inherit}

/* ===== NÃO RENOVAR & MOTIVO (PEÇA 8) ===== */
.ap-check{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  color:var(--ap-rtx);
}
.ap-check input[type="checkbox"]{
  appearance:none;
  -webkit-appearance:none;
  width:16px;
  height:16px;
  border:1.5px solid var(--ap-pet);
  border-radius:4px;
  background:#fff;
  cursor:pointer;
  display:inline-grid;
  place-content:center;
  transition:background .15s, border-color .15s;
  flex:none;
  margin:0;
}
.ap-check input[type="checkbox"]:checked{
  background:var(--ap-rbd, #c41e3a);
  border-color:var(--ap-rbd, #c41e3a);
}
.ap-check input[type="checkbox"]:checked::after{
  content:'✓';
  color:#fff;
  font-size:12px;
  font-weight:900;
  line-height:1;
}
.ap-check input[type="checkbox"]:focus-visible{
  outline:2px solid var(--ap-pet);
  outline-offset:2px;
}
.ap-kv.is-stacked{
  flex-direction:column;
  align-items:stretch;
  gap:4px;
}
.ap-kv.is-stacked>span:last-child{
  text-align:left;
  width:100%;
}
textarea.ap-motivo{
  display:block;
  width:100%;
  min-height:56px;
  padding:8px 10px;
  font-family:inherit;
  font-size:13px;
  line-height:1.4;
  background:#fff;
  color:var(--ap-tx);
  border:1.5px dashed var(--ap-pet);
  border-radius:10px;
  box-shadow:none;
  resize:vertical;
  margin-top:2px;
}
textarea.ap-motivo:focus{
  outline:2px solid var(--ap-pet);
  outline-offset:2px;
}

/* ===== RESPONSIVO ===== */
@media (max-width:900px){
  .ap-cl-table th,.ap-cl-table td{padding:5px 6px}
  .ap-col-quem{min-width:120px}
}
@media (max-width:820px){
  .ap-cols-p{grid-template-columns:1fr 1fr}
  .ap-cols-p>:first-child{grid-column:1/-1}
  .ap-cl-table{font-size:12px}
}
@media (max-width:560px){
  .ap-cols-p{grid-template-columns:1fr}
  .ap-wallet{padding:16px 18px;gap:12px 24px}
  /* checklist vira lista: passo + nome em cima, quem faz embaixo, estado à direita */
  .ap-cl-table,.ap-cl-table tbody{display:block;width:100%}
  .ap-cl-table thead{display:none}
  .ap-cl-table tr.ap-cl-row{display:grid;grid-template-columns:22px minmax(0,1fr) auto;grid-template-areas:"passo nome est" ". quem est";
    column-gap:8px;row-gap:2px;align-items:center;padding:9px 2px;border-bottom:1px dashed #b8c3c9}
  .ap-cl-table tr.ap-cl-row>td{display:block;padding:0;border:0;min-width:0;width:auto}
  .ap-cl-table td.ap-col-passo{grid-area:passo;text-align:left}
  .ap-cl-table td.ap-col-nome{grid-area:nome;min-width:0}
  .ap-cl-table td.ap-col-quem{grid-area:quem;min-width:0;font-size:12px}
  .ap-cl-table td.ap-col-est{grid-area:est;text-align:right}
  .ap-cl-table tr.ap-cl-oque:not([hidden]){display:block}
  .ap-cl-table tr.ap-cl-oque>td{display:block}
  .ap-est{padding:3px 10px 3px 4px;font-size:12px}
}

/* ===== 5b · PROXY PELO QUE O FLORENCIO FAZ ===== */
.ap-px-tabs{margin:0}
/* cabeçalho compacto: abas à esquerda, ações da aba à direita, numa barra só */
.ap-px-topo{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin:0 0 20px}
.ap-px-topo .ap-tabs{gap:6px}
.ap-px-topo .ap-tabs .ap-btn{padding:7px 18px;font-size:14px}
.ap-px-acoes{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px 16px}
.ap-px-topo:has([data-ap-px-tab="ips"][aria-selected="true"]) [data-ap-px-acoes="carteira"],
.ap-px-topo:has([data-ap-px-tab="carteira"][aria-selected="true"]) [data-ap-px-acoes="ips"]{display:none}
/* "Como é aplicada" sem caixa, só dentro da barra; a ficha de cada IP segue como está */
.ap-px-topo .ap-aplicada{border:0;background:none;padding:0;margin:0;border-radius:0;flex-wrap:nowrap;gap:4px 8px}
.ap-px-topo .ap-aplicada-label{flex:0 0 auto;margin:0}
.ap-px-topo .ap-radio{padding:2px 6px}
.ap-px-topo .ap-at-btn{padding:7px 16px;font-size:14px}
#ap-px-ips[hidden],#ap-px-carteira[hidden]{display:none!important}
/* o atributo hidden precisa vencer o display das classes (motivo só com NÃO RENOVAR) */
#ap-sub-proxy .ap-kv[hidden],#ap-sub-proxy textarea.ap-motivo[hidden]{display:none}

/* pede sua atenção */
.ap-atencao{border:var(--ap-solid);border-radius:var(--ap-r-card);box-shadow:var(--ap-shadow);background:#fff;padding:18px 22px;margin:0 4px 26px 0}
.ap-atencao.is-ok{border-style:dashed;box-shadow:none}
.ap-atencao-cab{display:flex;align-items:baseline;gap:12px;margin-bottom:8px}
#ap-body .ap-atencao-cab .ap-num{font-size:26px}
.ap-atencao-lista{list-style:none;margin:0;padding:0}
.ap-at-item{display:grid;grid-template-columns:100px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 0;border-top:1px dashed #b8c3c9;font-size:14px;line-height:1.4}
.ap-at-item:first-child{border-top:0}
.ap-at-tag .ap-pill{font-size:12px;padding:2px 10px}
.ap-at-acao{display:flex;justify-content:flex-end}
.ap-at-acao .ap-btn{padding:6px 16px;white-space:nowrap}
.ap-at-ok{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--ap-tx);padding:4px 0}

/* grupos da lista */
.ap-grupo-cab{margin:26px 0 10px}
.ap-grupo-tit{font-family:var(--ap-serif);font-size:26px;line-height:1.1;color:#000;text-transform:lowercase}
.ap-grupo-cab small{display:block;font-size:13px;color:var(--ap-t2);margin-top:2px}
.ap-grupo-n{font:700 15px/1 var(--ap-mono);color:var(--ap-t2);vertical-align:3px;margin-left:4px}
.ap-grupo-lista:empty::before{content:'nenhum IP aqui agora.';display:block;font-size:14px;color:var(--ap-t2);padding:6px 2px 4px}
.ap-grupo-enc{margin-top:26px}
.ap-grupo-enc>.ap-panel{padding-top:14px}
.ap-cols-and{grid-template-columns:1.2fr 2fr auto}
.ap-prox{font-size:14px}
.ap-prox small{display:block;font-size:12px;color:var(--ap-t2)}
.ap-prox.is-fail{color:var(--ap-rtx);font-weight:700}
.ap-row [data-ap-col="renovacao"] small{margin-top:4px}

/* ficha */
.ap-ficha-card>.ap-panel{padding:16px 20px 22px}
.ap-ficha-topo{display:grid;grid-template-columns:1.4fr 1fr 1.2fr;gap:14px;margin:4px 0 16px}
.ap-topo-bloco{min-width:0;background:#fff;border:var(--ap-dash);border-radius:var(--ap-r-box);padding:12px 14px}
.ap-topo-rot{display:block;font-size:12px;color:var(--ap-t2);margin-bottom:8px}
.ap-topo-bloco>small{display:block;font-size:12px;color:var(--ap-t2);margin-top:8px}
.ap-dec{display:flex;flex-wrap:wrap;gap:6px 14px}
#ap-sub-proxy .ap-dec .ap-check{color:var(--ap-tx);font-weight:400}
#ap-sub-proxy .ap-dec input[type="radio"]{accent-color:var(--ap-pet);margin:0}
.ap-topo-bloco .ap-actions{margin-top:10px}
.ap-proximo{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;background:var(--ap-cream);border:var(--ap-solid);border-radius:var(--ap-r-box);box-shadow:var(--ap-shadow-sm);padding:14px 18px;margin:0 3px 18px 0}
.ap-proximo small{display:block;font-size:12px;color:var(--ap-t2)}
.ap-proximo b{display:block;font-family:var(--ap-serif);font-weight:400;font-size:24px;line-height:1.15;color:#000}
.ap-proximo.is-fail{background:var(--ap-rbg);border-color:var(--ap-rbd)}
.ap-proximo.is-ok{background:#fff;border-style:dashed;box-shadow:none}
.ap-proximo .ap-est{padding:6px 16px 6px 6px;font-size:14px}
#ap-body .ap-box-cl>h4{display:none}
.ap-box-cl{border:0;padding:0;background:none}
.ap-cl-cards{margin:10px 0}
.ap-cl-card .ap-cl-titulo{display:none}
.ap-cl-prog{font:700 13px/1.2 var(--ap-mono);color:var(--ap-t2);white-space:nowrap}
.ap-cl-card .ap-cl-bloco{margin:6px 0 0}
.ap-secoes{margin-top:14px}
.ap-secao>.ap-row small,.ap-grupo-enc>.ap-row small{display:block}

@media (max-width:820px){
  .ap-cols-and{grid-template-columns:1fr auto}
  .ap-cols-and>:first-child{grid-column:1/-1}
  .ap-ficha-topo{grid-template-columns:1fr}
}
@media (max-width:560px){
  .ap-cols-and{grid-template-columns:1fr}
  .ap-at-item{grid-template-columns:1fr;gap:6px}
  .ap-at-acao{justify-content:flex-start}
  .ap-atencao{padding:16px 16px}
  .ap-ficha-card>.ap-panel{padding:12px 12px 16px}
  .ap-proximo b{font-size:21px}
}

/* ===== 5c · barrinha, pop-up de atenção e cor do status no card ===== */
.ap-px-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;margin:0 0 22px}
.ap-px-bar .ap-tools{margin:0;flex:1 1 auto;justify-content:flex-end}
#ap-body .ap-at-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;font-size:15px}
#ap-body .ap-at-btn.is-on{font-weight:700;border-color:var(--ap-pet);box-shadow:var(--ap-shadow-sm)}
#ap-body .ap-at-btn.is-ok{border-style:dashed;color:var(--ap-t2);background:#fff}
#ap-body .ap-at-btn .ap-check-dot{width:18px;height:18px;font-size:11px}
.ap-at-n{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 6px;box-sizing:border-box;border-radius:999px;background:#000;color:var(--ap-y);font:700 13px/1 var(--ap-mono)}
.ap-dlg{box-sizing:border-box;width:min(780px,calc(100vw - 32px));max-height:min(82vh,760px);overflow:auto;margin:auto;padding:18px 22px 10px;
  background:#fff;color:var(--ap-tx);border:var(--ap-solid);border-radius:var(--ap-r-card);box-shadow:var(--ap-shadow);font-family:var(--ap-sans)}
.ap-dlg::backdrop{background:rgba(26,25,21,.5)}
.ap-dlg-cab{display:flex;align-items:center;gap:12px;margin-bottom:6px;position:sticky;top:-18px;background:#fff;padding:4px 0 8px;z-index:1}
#ap-body .ap-dlg-cab .ap-num{font-size:26px}
.ap-dlg-x{margin-left:auto;flex:none;width:38px;height:38px;border-radius:50%;border:1.5px solid var(--ap-pet);background:#fff;color:var(--ap-tx);font:700 15px/1 var(--ap-sans);cursor:pointer}
.ap-dlg-x:hover{background:var(--ap-cream)}
.ap-dlg-x:focus-visible,.ap-dlg .ap-btn:focus-visible{outline:2px solid var(--ap-pet);outline-offset:2px}

/* card do IP: fundo bem clarinho no tom do status + faixa de 5px na esquerda */
.ap-ficha-card.is-st-b{--st-bg:#F4F8FC;--st-bd:var(--ap-bbd)}
.ap-ficha-card.is-st-o{--st-bg:#FEF6EF;--st-bd:#C45E12}
.ap-ficha-card.is-st-y{--st-bg:#FFFCEC;--st-bd:#B59A00}
.ap-ficha-card.is-st-g{--st-bg:#F3F9F5;--st-bd:var(--ap-gbd)}
.ap-ficha-card.is-st-r{--st-bg:#FDF4F2;--st-bd:var(--ap-rbd)}
.ap-card.ap-ficha-card,.ap-card.ap-ficha-card.is-open{background:var(--st-bg,#fff);border-left:5px solid var(--st-bd,var(--ap-pet))}

@media (max-width:560px){
  .ap-px-bar{flex-direction:column;align-items:stretch}
  .ap-px-bar .ap-tools{justify-content:flex-start}
  .ap-px-topo,.ap-px-acoes{justify-content:flex-start}
  .ap-px-topo .ap-aplicada{flex-wrap:wrap;flex:1 1 100%;order:3;gap:2px 10px}
  .ap-px-topo .ap-aplicada-label{flex:0 0 100%}
  .ap-px-topo .ap-radio{padding:2px 0}
  .ap-px-acoes [data-ap-px-acoes] .ap-btn,.ap-px-acoes #ap-atencao-btn{order:1}
  .ap-px-acoes #ap-add-proxy{order:2}
  .ap-px-acoes{gap:8px}
  .ap-px-topo #ap-atencao-btn{padding:7px 12px;gap:6px}
  .ap-px-topo #ap-add-proxy{padding:7px 14px}
  #ap-body .ap-at-btn{justify-content:center}
  .ap-dlg{padding:14px 14px 8px;max-height:88vh}
}

/* ===== 5d · grupos em destaque, ficha simples ===== */
/* grupos: título grande, contador grande em mono coral, faixa grossa separando */
.ap-grupo-cab{margin:44px 0 16px;padding-top:20px;border-top:4px solid var(--ap-pet)}
.ap-grupo-tit{font-size:40px;line-height:1}
.ap-grupo-cab .ap-grupo-n{font:700 34px/1 var(--ap-mono);color:var(--ap-coral);vertical-align:1px;margin-left:10px;letter-spacing:-.02em}
.ap-grupo-cab small{margin-top:6px;font-size:14px}
.ap-grupo-enc{margin-top:44px}
.ap-grupo-enc .ap-grupo-n{font:700 20px/1 var(--ap-mono);color:var(--ap-coral);margin-left:6px}

/* cor suave do status pra caixa do próximo passo */
.ap-ficha-card.is-st-b{--st-soft:var(--ap-bbg)}
.ap-ficha-card.is-st-o{--st-soft:#FCE4CC}
.ap-ficha-card.is-st-y{--st-soft:var(--ap-cream)}
.ap-ficha-card.is-st-g{--st-soft:var(--ap-gbg)}
.ap-ficha-card.is-st-r{--st-soft:var(--ap-rbg)}

/* topo numa linha, sem caixas */
.ap-ficha-card>.ap-panel{padding:14px 20px 22px}
.ap-ficha-topo{display:block;margin:0 0 14px}
.ap-topo-linha{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;padding:2px 0 14px;border-bottom:1px solid rgba(38,70,88,.2)}
.ap-topo-item{display:inline-flex;align-items:center;gap:8px;min-width:0}
.ap-topo-item>small{font-size:12px;color:var(--ap-t2)}
#ap-sub-proxy .ap-btn-sm{padding:6px 16px;font-size:13px}
.ap-st-menu{position:relative}
.ap-st-menu>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:2px}
.ap-st-menu>summary::-webkit-details-marker{display:none}
.ap-st-menu>summary .ap-pill{font-weight:700;font-size:14px;padding:4px 14px}
.ap-st-menu>summary:focus-visible{outline:2px solid var(--ap-pet);outline-offset:2px}
.ap-st-seta{font-size:16px;line-height:1;color:var(--ap-tx)}
.ap-st-menu[open]>summary .ap-st-seta{transform:rotate(180deg)}
#ap-card-teste.is-open>.ap-row .ap-pill{display:none}
.ap-st-lista{position:absolute;z-index:30;top:calc(100% + 6px);left:0;min-width:200px;padding:10px;background:#fff;border:var(--ap-solid);border-radius:var(--ap-r-box);box-shadow:var(--ap-shadow-sm)}
.ap-st-lista .ap-status-ctrl{flex-direction:column;align-items:stretch;gap:6px}
.ap-st-lista button.ap-status-btn{text-align:left}
.ap-st-msg{margin:8px 0 0;font-size:12px;color:var(--ap-t2)}
.ap-topo-motivo{margin-top:12px;max-width:420px}
.ap-ficha-card .ap-card{overflow:visible}
.ap-ficha-card.is-open{overflow:visible}

/* próximo passo: caixa na cor do status, só quando tem pendência */
.ap-proximo-wrap:empty{display:none}
.ap-ficha-card .ap-proximo{background:var(--st-soft,var(--ap-cream));border:1.5px solid var(--st-bd,var(--ap-pet));box-shadow:none;margin:0 0 6px}
.ap-ficha-card .ap-proximo.is-fail{background:var(--ap-rbg);border-color:var(--ap-rbd)}

/* abas pequenas dentro da ficha */
.ap-ftabs{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 14px;padding-bottom:12px;border-bottom:1px solid rgba(38,70,88,.2)}
.ap-ftab{appearance:none;-webkit-appearance:none;border:1px solid transparent;background:none;border-radius:999px;padding:6px 14px;font:400 14px/1.2 var(--ap-sans);color:var(--ap-t2);cursor:pointer}
.ap-ftab:hover{background:rgba(255,255,255,.75);color:var(--ap-tx)}
.ap-ftab.is-on{background:var(--ap-y);border-color:var(--ap-y);color:#000;font-weight:700}
.ap-ftab:focus-visible{outline:2px solid var(--ap-pet);outline-offset:2px}
.ap-fpane[hidden]{display:none!important}

/* por dentro sem caixas: separa por espaço e linha fina */
#ap-body .ap-ficha-card .ap-panel .ap-box{border:0;border-radius:0;background:none;padding:0;box-shadow:none;min-width:0}
#ap-body .ap-ficha-card .ap-fpane>*+.ap-box{border-top:1px solid rgba(38,70,88,.2);padding-top:16px;margin-top:18px}
#ap-body .ap-ficha-card .ap-fpane .ap-box h4{font-size:20px!important;margin:0 0 8px!important}
.ap-ficha-card .ap-aplicada{border:0;background:none;padding:0 0 14px;margin:0;border-radius:0}
.ap-ficha-card .ap-cl-cards{margin:0}
.ap-ficha-card .ap-card.ap-cl-card,.ap-ficha-card .ap-card.ap-cl-card.is-open{border:0;border-bottom:1px solid rgba(38,70,88,.2);border-radius:0;background:none;box-shadow:none;margin:0}
.ap-ficha-card .ap-cl-card>.ap-row{padding-left:2px}
.ap-ficha-card .ap-cl-card>.ap-panel{border-top:0;padding:0 2px 14px}
.ap-ficha-card .ap-troca-nota,.ap-ficha-card .ap-gate-note{border:0;border-radius:0;background:none;padding:4px 0;color:var(--ap-t2)}

/* cor com significado no progresso: verde feito, azul em andamento, laranja/vermelho problema */
.ap-cl-prog.is-ok{color:var(--ap-gtx)}
.ap-cl-prog.is-and{color:var(--ap-btx)}
.ap-cl-prog.is-bad{color:var(--ap-rtx)}

@media (max-width:560px){
  .ap-grupo-tit{font-size:32px}
  .ap-grupo-cab .ap-grupo-n{font-size:28px}
  .ap-topo-linha{gap:10px 14px}
  .ap-topo-dec{flex-wrap:wrap}
  .ap-ficha-card>.ap-panel{padding:12px 12px 16px}
}

/* ===== 5e · linha do card de IP ===== */
.ap-ficha-card.is-st-b{--st-tx:var(--ap-btx)}
.ap-ficha-card.is-st-o{--st-tx:#8A3408}
.ap-ficha-card.is-st-y{--st-tx:#5C4A00}
.ap-ficha-card.is-st-g{--st-tx:var(--ap-gtx)}
.ap-ficha-card.is-st-r{--st-tx:var(--ap-rtx)}
.ap-cols-uso{grid-template-columns:52px minmax(0,1.5fr) minmax(0,1.1fr) minmax(0,1.4fr) minmax(96px,auto)}
.ap-ficha-card>.ap-row.ap-cols-and{grid-template-columns:52px minmax(0,1.3fr) minmax(0,2fr) minmax(96px,auto)}
.ap-ficha-card>.ap-row{column-gap:16px;padding-top:12px;padding-bottom:12px}
.ap-selo{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:50%;box-sizing:border-box;
  background:var(--st-soft,#fff);border:2px solid var(--st-bd,var(--ap-pet));color:var(--st-tx,var(--ap-tx));font:700 16px/1 var(--ap-mono);letter-spacing:-.02em}
.ap-id{min-width:0}
.ap-id>b{display:block;font-size:16px;line-height:1.25;color:#000;overflow-wrap:anywhere}
.ap-id>small{display:block;margin-top:2px;font-size:12px;color:var(--ap-t3)}
.ap-id>small .ap-mono{font-size:12px;color:var(--ap-t3)}
.ap-ressalva{font-size:11px;padding:1px 8px;margin-left:6px;vertical-align:1px}
.ap-ap{min-width:0}
.ap-tag{display:inline-block;max-width:100%;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;border:1px solid var(--ap-pet);border-radius:999px;padding:1px 10px;font-size:12px;line-height:1.5;color:var(--ap-tx);background:#fff;white-space:nowrap}
.ap-ap>small{display:block;margin-top:4px;font-size:12px;color:var(--ap-t2);overflow-wrap:anywhere}
.ap-ap>small.ap-sem-conta{color:var(--ap-t3)}
.ap-venc{min-width:0}
.ap-venc .ap-pill{white-space:normal}
.ap-venc>small{display:block;margin-top:4px;font-size:12px;color:var(--ap-t3)}
.ap-st-txt{font-size:12px;font-weight:700;color:var(--st-tx,var(--ap-t2));text-align:right;white-space:nowrap}

@media (max-width:820px){
  .ap-ficha-card>.ap-row.ap-cols-uso{grid-template-columns:46px minmax(0,1fr);
    grid-template-areas:"selo id" ". ap" ". venc" ". st";row-gap:6px;padding-right:40px}
  .ap-ficha-card>.ap-row.ap-cols-and{grid-template-columns:46px minmax(0,1fr);
    grid-template-areas:"selo id" ". prox" ". st";row-gap:6px;padding-right:40px}
  .ap-ficha-card>.ap-row>.ap-selo{grid-area:selo}
  .ap-ficha-card>.ap-row>.ap-id{grid-area:id}
  .ap-ficha-card>.ap-row>.ap-st-txt{grid-area:st;text-align:left}
  .ap-ficha-card>.ap-row>.ap-ap{grid-area:ap;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .ap-ficha-card>.ap-row>.ap-ap>small{margin-top:0}
  .ap-ficha-card>.ap-row>.ap-venc{grid-area:venc;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .ap-ficha-card>.ap-row>.ap-venc>small{margin-top:0}
  .ap-ficha-card>.ap-row>.ap-prox{grid-area:prox}
  .ap-selo{width:40px;height:40px;font-size:14px}
}

/* ===== 5f · aba pedidos e carteira na mesma linguagem da aba IPs ===== */
.ap-cart-bar{justify-content:flex-start}
/* carteira: 3 blocos lado a lado */
#ap-body .ap-wallet,#ap-body .ap-wallet.is-bad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch;
  border:0;box-shadow:none;background:none;padding:0;margin:0 0 8px}
.ap-cart-bloco{min-width:0;background:#fff;border:var(--ap-dash);border-radius:var(--ap-r-card);padding:16px 18px}
.ap-cart-bloco>small{display:block;font-size:13px;color:var(--ap-t2);margin-bottom:8px}
.ap-cart-bloco>small.ap-cart-nota{margin:8px 0 0;font-size:12px;color:var(--ap-t3)}
.ap-cart-dif.is-falta{background:var(--ap-rbg);border:1.5px solid var(--ap-rbd)}
.ap-cart-dif.is-sobra{background:var(--ap-gbg);border:1.5px solid var(--ap-gbd)}
#ap-body .ap-wallet .ap-cart-dif.is-falta .ap-big,.ap-cart-dif.is-falta>small{color:var(--ap-rtx)}
#ap-body .ap-wallet .ap-cart-dif.is-sobra .ap-big,.ap-cart-dif.is-sobra>small{color:var(--ap-gtx)}
#ap-body .ap-wallet.is-bad .ap-cart-dif .ap-wallet-msg,#ap-body .ap-wallet .ap-cart-dif .ap-wallet-msg{background:none;border:0;padding:0;margin:8px 0 0;font-size:13px;color:inherit;min-width:0}
.ap-wallet-regras{grid-column:1/-1;margin:2px 2px 0}
.ap-wallet-regras small{color:var(--ap-t2)}
.ap-cart-sec{margin-top:8px}
.ap-cab-acao{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* pop-ups pequenos */
.ap-dlg-sm{width:min(560px,calc(100vw - 32px));padding-bottom:18px}
.ap-dlg-tit{font-family:var(--ap-serif);font-size:28px;line-height:1;color:#000;text-transform:lowercase}
.ap-dlg-acoes{margin-top:16px}
.ap-dlg .ap-label{margin-top:10px}
#ap-body .ap-dlg input.ap-json{box-sizing:border-box;display:block;width:100%;max-width:none;margin:0;padding:9px 12px;font:400 15px/1.3 var(--ap-sans);
  color:var(--ap-field-tx);-webkit-text-fill-color:var(--ap-field-tx);background:var(--ap-field-bg);border:1.5px solid var(--ap-field-bd);border-radius:var(--ap-r-sm);box-shadow:none}
#ap-body .ap-dlg input.ap-json:focus{background:#fff;outline:2px solid var(--ap-field-focus);outline-offset:2px}
.ap-campos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px}
.ap-campo{min-width:0}
#ap-sub-proxy .ap-campo input.ap-json{max-width:none}

/* pedidos: cards como os de IP, cor pelo estado */
.ap-ped-card.is-pe-ok,.ap-ass-linha.is-pe-ok{--st-bg:#F3F9F5;--st-bd:var(--ap-gbd);--st-soft:var(--ap-gbg);--st-tx:var(--ap-gtx)}
.ap-ped-card.is-pe-venc,.ap-ass-linha.is-pe-venc{--st-bg:#FFFCEC;--st-bd:#B59A00;--st-soft:var(--ap-cream);--st-tx:#5C4A00}
.ap-ped-card.is-pe-sup,.ap-ass-linha.is-pe-sup{--st-bg:#FEF6EF;--st-bd:#C45E12;--st-soft:#FCE4CC;--st-tx:#8A3408}
.ap-ped-card.is-pe-enc,.ap-ass-linha.is-pe-enc{--st-bg:#F5F5F3;--st-bd:#8C8C86;--st-soft:var(--ap-stone);--st-tx:#555}
.ap-card.ap-ped-card,.ap-card.ap-ped-card.is-open{background:var(--st-bg,#fff);border-left:5px solid var(--st-bd,var(--ap-pet))}
.ap-ped-card>.ap-row.ap-cols-ped{grid-template-columns:52px minmax(0,1.4fr) minmax(0,1.3fr) auto auto minmax(0,1fr);column-gap:16px;padding-top:12px;padding-bottom:12px}
.ap-chip-ips{justify-self:start;border:1px dashed var(--ap-pet);border-radius:999px;padding:3px 12px;font-size:13px;line-height:1.4;background:#fff;color:var(--ap-tx)}
.ap-chip-ips.is-diff{background:#FCE4CC;border:1.5px solid #C45E12;color:#8A3408;font-weight:700}
.ap-ped-valor{font:700 15px/1.2 var(--ap-mono);color:var(--ap-tx);white-space:nowrap}
.ap-ped-venc .ap-pill{white-space:nowrap}
#ap-body .ap-ped-card .ap-ped-alerts{padding:0 20px 12px 88px;font-size:13px;font-weight:700;color:#8A3408}
.ap-ped-alerts span+span::before{content:' · '}
.ap-ped-card>.ap-panel{padding:14px 20px 20px}
.ap-ped-ips{margin:0 0 14px;padding-bottom:14px;border-bottom:1px solid rgba(38,70,88,.2)}
.ap-ped-ips>small{display:block;font-size:12px;color:var(--ap-t2);margin-bottom:8px}
.ap-ped-ips>div{display:flex;flex-wrap:wrap;gap:8px}
.ap-ip-chip{appearance:none;-webkit-appearance:none;border:1.5px solid var(--ap-pet);background:#fff;color:var(--ap-tx);border-radius:999px;padding:5px 14px;font:700 13px/1.2 var(--ap-sans);cursor:pointer}
.ap-ip-chip .ap-mono{font-weight:400;font-size:12px;color:var(--ap-t2)}
.ap-ip-chip:hover{background:var(--ap-cream)}
.ap-ip-chip:focus-visible{outline:2px solid var(--ap-pet);outline-offset:2px}
.ap-ped-enc .ap-grupo-n{font:700 20px/1 var(--ap-mono);color:var(--ap-coral);margin-left:6px}
#ap-pedidos-wrap .ap-grupo-cab{margin-top:30px}

/* assinaturas: linha compacta */
.ap-ass-linha{display:grid;grid-template-columns:44px minmax(0,1.5fr) auto auto auto;gap:14px;align-items:center;margin-bottom:10px;
  padding:10px 16px;background:var(--st-bg,#fff);border:var(--ap-dash);border-left:5px solid var(--st-bd,var(--ap-pet));border-radius:var(--ap-r-box)}
.ap-ass-linha .ap-selo{width:40px;height:40px;font-size:15px}

/* limites: 4 blocos só leitura */
.ap-lim-blocos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.ap-lim-bloco{background:#fff;border:var(--ap-dash);border-radius:var(--ap-r-box);padding:14px 16px;min-width:0}
.ap-lim-n{display:block;font:700 34px/1 var(--ap-mono);color:var(--ap-coral);letter-spacing:-.02em}
.ap-lim-bloco small{display:block;margin-top:6px;font-size:13px;color:var(--ap-t2)}

@media (max-width:820px){
  #ap-body .ap-wallet,#ap-body .ap-wallet.is-bad{grid-template-columns:1fr}
  .ap-ped-card>.ap-row.ap-cols-ped{grid-template-columns:46px minmax(0,1fr);row-gap:8px;padding-right:40px;
    grid-template-areas:"selo id" ". chip" ". valor" ". venc"}
  .ap-ped-card>.ap-row>.ap-selo{grid-area:selo}
  .ap-ped-card>.ap-row>.ap-id{grid-area:id}
  .ap-ped-card>.ap-row>.ap-chip-ips{grid-area:chip}
  .ap-ped-card>.ap-row>.ap-ped-valor{grid-area:valor;display:flex;align-items:center;gap:10px}
  .ap-ped-card>.ap-row>:nth-child(5){grid-area:valor;justify-self:end}
  .ap-ped-card>.ap-row>.ap-ped-venc{grid-area:venc}
  #ap-body .ap-ped-card .ap-ped-alerts{padding:0 16px 12px 62px}
  .ap-ass-linha{grid-template-columns:40px minmax(0,1fr) auto;grid-template-areas:"selo id valor" ". pill bt"}
  .ap-ass-linha>.ap-selo{grid-area:selo}.ap-ass-linha>.ap-id{grid-area:id}.ap-ass-linha>.ap-ped-valor{grid-area:valor}
  .ap-ass-linha>:nth-child(4){grid-area:pill}.ap-ass-linha>:nth-child(5){grid-area:bt;justify-self:end}
  .ap-lim-blocos{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .ap-campos{grid-template-columns:1fr}
}

/* ===== PADRÕES DA MARCA (Ratos 04 a 09, só o estilo) ===== */
/* marca-texto amarelo atrás da palavra-chave (faixa baixa, atrás da linha de base) */
.ap-mk{background:linear-gradient(transparent 58%,var(--ap-y) 58%);padding:0 .12em;margin:0 -.12em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.ap-prox .ap-mk{font-weight:700;color:#000}
.ap-prox.is-fail .ap-mk{color:var(--ap-rtx)}
/* título: começo em sans 700 + fecho em serif itálico 400 (serif nunca em negrito) */
.ap-tit{font-family:var(--ap-sans);font-weight:700;letter-spacing:-.02em;color:#000}
.ap-tit .ap-tit-it{font-family:var(--ap-serif);font-style:italic;font-weight:400;letter-spacing:0;font-size:1.22em}
.ap-grupo-tit.ap-tit{font-size:32px;line-height:1.1;text-transform:lowercase}
@media (max-width:560px){.ap-grupo-tit.ap-tit{font-size:26px}}
/* pílula preta com texto amarelo: destaque curto (número, 1 a 3 palavras) */
.ap-pill-k{display:inline-grid;place-items:center;box-sizing:border-box;min-width:24px;height:24px;padding:0 8px;border-radius:999px;background:#000;color:var(--ap-y);font:700 13px/1 var(--ap-mono);letter-spacing:.02em}

/* ===== MAPA DE VÍNCULOS · pedido em cima, IP no centro (card principal), celular/gmail/instagram/facebook embaixo ===== */
.ap-mapa-wrap{margin:0 0 18px}
.ap-mapa{display:grid;justify-items:center;--ln:1px dashed var(--ap-pet);--dot:var(--ap-pet)}
.ap-mapa-topo,.ap-mapa-centro{display:flex;flex-direction:column;align-items:center;width:min(300px,100%);position:relative}
.ap-mapa-topo::after,.ap-mapa-centro::after{content:'';display:block;height:16px;border-left:var(--ln)}
.ap-mapa-base{display:grid;grid-template-columns:repeat(4,1fr);width:100%;background:radial-gradient(circle at 50% 0,var(--dot) 3px,transparent 3.5px)}
.ap-mapa-no{position:relative;padding:16px 6px 0;background:radial-gradient(circle at 50% 0,var(--dot) 3px,transparent 3.5px)}
.ap-mapa-no::before{content:'';position:absolute;top:0;left:0;right:0;border-top:var(--ln)}
.ap-mapa-no:first-child::before{left:50%}
.ap-mapa-no:last-child::before{right:50%}
.ap-mapa-no::after{content:'';position:absolute;top:0;left:50%;height:16px;border-left:var(--ln)}
.ap-mapa-caixa{--t:#8C8C86;position:relative;box-sizing:border-box;display:flex;flex-direction:column;gap:2px;width:100%;margin:0;padding:9px 14px;text-align:left;
  background:#fff;color:var(--ap-tx);border:1.5px solid var(--t);border-radius:18px;font:inherit;line-height:1.3}
.ap-mapa-topo .ap-mapa-caixa,.ap-mapa-centro .ap-mapa-caixa{align-items:center;text-align:center}
button.ap-mapa-caixa{cursor:pointer;transition:background .15s}
button.ap-mapa-caixa:hover{background:var(--ap-cream)}
button.ap-mapa-caixa:focus-visible{outline:2px solid var(--ap-pet);outline-offset:3px}
.ap-mapa-caixa.is-t-g{--t:var(--ap-gbd)}
.ap-mapa-caixa.is-t-r{--t:var(--ap-rbd)}
.ap-mapa-caixa.is-t-n,.ap-mapa-caixa.is-neutra{--t:var(--ap-pet)}
.ap-mapa-rot{font:400 11px/1.3 var(--ap-mono);letter-spacing:.04em;color:var(--ap-t2)}
.ap-mapa-val{font-size:14px;font-weight:700;overflow-wrap:anywhere}
.ap-mapa-sub{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;justify-content:center;font-size:12px;color:var(--ap-t2)}
.ap-mapa-caixa .ap-pill{font-size:12px;padding:2px 10px}
/* pedido: card leve, borda tracejada amarela; a cor do estado fica na pílula do vencimento */
.ap-mapa-caixa.is-pedido{border:1.5px dashed #B59A00}
.ap-mapa-topo .ap-mapa-caixa::after,.ap-mapa-centro .ap-mapa-caixa::before{content:'';position:absolute;left:50%;width:7px;height:7px;margin-left:-3px;border-radius:50%;background:var(--dot)}
.ap-mapa-topo .ap-mapa-caixa::after{bottom:-19px}
.ap-mapa-centro .ap-mapa-caixa::before{top:-19px}
/* IP: card principal, borda sólida escura + sombra dura (sem desfoque); status em pílula na cor do status */
.ap-mapa-caixa.is-ip{border:var(--ap-solid);border-radius:20px;box-shadow:var(--ap-shadow);padding:11px 18px;gap:3px;margin:0 4px 4px 0;width:calc(100% - 4px)}
.ap-mapa-caixa.is-ip .ap-mapa-val{font-size:16px}
/* ainda não ligado: borda tracejada cinza e texto apagado */
.ap-mapa-caixa.is-t-x{border:1.5px dashed #B8B8B2;background:transparent;color:var(--ap-t3)}
.ap-mapa-caixa.is-t-x .ap-mapa-rot{color:var(--ap-t3)}
.ap-mapa-caixa.is-t-x .ap-mapa-val{font-weight:400}
@media (max-width:560px){
  .ap-mapa{justify-items:stretch;gap:10px;margin-left:8px;padding-left:18px;position:relative}
  .ap-mapa::before{content:'';position:absolute;left:0;top:18px;bottom:20px;border-left:var(--ln)}
  .ap-mapa-topo,.ap-mapa-centro{width:100%}
  .ap-mapa-topo::after,.ap-mapa-centro::after,.ap-mapa-no::after{display:none}
  .ap-mapa-base{grid-template-columns:1fr;gap:8px;background:none}
  .ap-mapa-no{padding:0;background:none}
  .ap-mapa-no::before,.ap-mapa-no:first-child::before,.ap-mapa-no:last-child::before{display:none}
  .ap-mapa-caixa,.ap-mapa-topo .ap-mapa-caixa,.ap-mapa-centro .ap-mapa-caixa{flex-direction:row;flex-wrap:wrap;align-items:baseline;justify-content:flex-start;gap:2px 10px;text-align:left;padding:8px 14px}
  .ap-mapa-caixa.is-ip{flex-direction:row;align-items:center;padding:10px 14px;width:calc(100% - 4px)}
  .ap-mapa-sub{justify-content:flex-start}
  /* gancho da lateral + ponto em cada caixa */
  .ap-mapa-caixa::before,.ap-mapa-centro .ap-mapa-caixa::before{content:'';position:absolute;display:block;left:-19px;right:auto;top:50%;bottom:auto;width:19px;height:0;margin:0;border:0;border-top:var(--ln);border-radius:0;background:none}
  .ap-mapa-caixa::after,.ap-mapa-topo .ap-mapa-caixa::after{content:'';position:absolute;display:block;left:-21px;right:auto;top:calc(50% - 3px);bottom:auto;width:7px;height:7px;margin:0;border-radius:50%;background:var(--dot)}
  .ap-mapa-rot{flex:0 0 74px}
  .ap-mapa-topo .ap-mapa-rot,.ap-mapa-centro .ap-mapa-rot{flex:0 0 auto}
}