/* iSol · Seletor por processo (rodada 15). Componente: public/seletor-processo.js.
   Usa os tokens do tema preto executivo (styles.css) com valores de reserva, para montar em qualquer página. */
.isp { display: grid; gap: 22px; padding: clamp(18px, 3vw, 30px); border: 1px solid var(--line-exec, rgba(255,255,255,.12)); border-radius: 22px; background: var(--bg-1, #0a0e14); color: var(--white, #fff); }
.isp-step[hidden] { display: none; }
.isp-n { margin: 0 0 4px; font: 500 12px/1.4 var(--f-mono, ui-monospace, monospace); letter-spacing: .06em; text-transform: uppercase; color: var(--cyan, #34c3f0); }
.isp-step h3 { margin: 0 0 12px; font: 600 clamp(1.05rem, 1.8vw, 1.25rem)/1.3 var(--f-display, system-ui, sans-serif); color: var(--white, #fff); }
.isp-step h3:focus, .isp-rec-n:focus { outline: none; }
.isp-step h3:focus-visible, .isp-rec-n:focus-visible { outline: 2px solid var(--cyan, #34c3f0); outline-offset: 4px; border-radius: 4px; }
.isp-ctx { display: inline-block; margin-left: 6px; padding: 2px 10px; border-radius: 999px; background: rgba(52,195,240,.14); font: 500 13px/1.6 var(--f-mono, ui-monospace, monospace); color: var(--cyan, #34c3f0); vertical-align: middle; }
.isp-ops { display: flex; flex-wrap: wrap; gap: 8px; }
.isp-op { appearance: none; display: inline-flex; align-items: center; min-height: 44px; padding: 9px 16px; border: 1px solid rgba(255,255,255,.2); border-radius: 12px; background: var(--bg-2, #111722); color: var(--white, #fff); font: 500 15px/1.3 var(--f-display, system-ui, sans-serif); text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.isp-op:hover { border-color: var(--cyan, #34c3f0); }
.isp-op:focus-visible, .isp-reset:focus-visible { outline: 2px solid var(--cyan, #34c3f0); outline-offset: 2px; }
.isp-op[aria-pressed="true"] { border-color: var(--cyan, #34c3f0); background: var(--cyan, #34c3f0); color: var(--navy-900, #061627); }

/* Como fica com iSol: passos com o papel de cada um */
.isp-como { margin: 0; padding: 18px; border: 1px solid rgba(52,195,240,.35); border-radius: 18px; background: linear-gradient(180deg, rgba(52,195,240,.08), rgba(52,195,240,.02)); }
.isp-como figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 0 0 14px; }
.isp-como figcaption b { font: 600 16px/1.35 var(--f-display, system-ui, sans-serif); color: var(--white, #fff); }
.isp-ilus { font: 500 12px var(--f-mono, ui-monospace, monospace); color: var(--on-dark-soft, #b9cbdd); }
.isp-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; counter-reset: isp; }
.isp-p { position: relative; display: grid; align-content: start; gap: 6px; padding: 14px; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; background: var(--bg-2, #111722); min-width: 0; }
.isp-p:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -12px; width: 12px; height: 2px; background: var(--cyan, #34c3f0); }
.isp-role { justify-self: start; padding: 2px 9px; border-radius: 999px; font: 600 12.5px/1.6 var(--f-mono, ui-monospace, monospace); background: rgba(52,195,240,.16); color: var(--cyan, #34c3f0); }
.isp-p-command { border-color: var(--cyan, #34c3f0); }
.isp-p-flow .isp-role { background: rgba(255,255,255,.1); color: var(--white, #fff); }
.isp-voce { justify-self: start; padding: 1px 9px; border-radius: 999px; border: 1px solid rgba(255,255,255,.4); font: 600 12px/1.6 var(--f-display, system-ui, sans-serif); color: var(--white, #fff); }
.isp-pt { font-size: 14.5px; line-height: 1.5; color: var(--on-dark-soft, #b9cbdd); }

/* recomendação */
.isp-rec:empty { display: none; }
.isp-rec { padding: 20px; border-radius: 18px; border: 1px solid var(--cyan, #34c3f0); background: var(--bg-2, #111722); box-shadow: 0 0 40px rgba(27,157,224,.16); }
.isp-rec-k { margin: 0; font: 500 12px var(--f-mono, ui-monospace, monospace); letter-spacing: .06em; text-transform: uppercase; color: var(--cyan, #34c3f0); }
.isp-rec-n { margin: 6px 0 0; font: 700 clamp(1.15rem, 2.2vw, 1.5rem)/1.3 var(--f-display, system-ui, sans-serif); color: var(--white, #fff); }
.isp-rec-n i { font-style: normal; color: var(--cyan, #34c3f0); }
.isp-why, .isp-notas { margin: 12px 0 0; padding: 0 0 0 18px; display: grid; gap: 6px; font-size: 15px; line-height: 1.5; color: var(--on-dark-soft, #b9cbdd); }
.isp-notas { padding: 10px 0 0; list-style: none; border-top: 1px solid rgba(255,255,255,.1); font-size: 13.5px; }
.isp-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 18px; }
.isp-cta .btn-primary { color: var(--navy-900, #061627); }
.isp-reset { appearance: none; min-height: 44px; padding: 8px 4px; border: 0; background: none; color: var(--on-dark-soft, #b9cbdd); font: 500 14.5px var(--f-display, system-ui, sans-serif); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.isp-cta2 { margin: 8px 0 0; font-size: 13.5px; color: var(--on-dark-soft, #b9cbdd); }

@media (max-width: 900px) {
  .isp-flow { grid-auto-flow: row; grid-auto-columns: auto; }
  .isp-p:not(:last-child)::after { top: auto; bottom: -12px; right: auto; left: 24px; width: 2px; height: 12px; }
}
@media (max-width: 480px) {
  .isp-op { flex: 1 1 calc(50% - 4px); }
}
@media (prefers-reduced-motion: no-preference) {
  .isp-como, .isp-rec { animation: isp-in .35s ease-out both; }
}
@keyframes isp-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* modo compacto (Home, /solucoes/): área → resultado curto */
.isp-compacto { gap: 18px; }
.isp-dl { margin: 12px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.isp-dl > div { padding: 12px 14px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; background: var(--bg-1, #0a0e14); min-width: 0; }
.isp-dl dt { font: 500 11.5px var(--f-mono, ui-monospace, monospace); letter-spacing: .06em; text-transform: uppercase; color: var(--cyan, #34c3f0); }
.isp-dl dd { margin: 4px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--white, #fff); }
.isp-mais { display: inline-flex; align-items: center; min-height: 44px; color: var(--cyan, #34c3f0); font: 600 14.5px var(--f-display, system-ui, sans-serif); text-underline-offset: 3px; }
.isp-mais:focus-visible { outline: 2px solid var(--cyan, #34c3f0); outline-offset: 2px; }
@media (max-width: 760px) { .isp-dl { grid-template-columns: minmax(0, 1fr); } }