/* Estilo só de telas/editor-fluxo-design.js (06-fluxo.html e 07-design.html). Componente compartilhado fica em base.css. */

/* ===== 06 Fluxo ===== */
.fx-aba,.dz-aba{overflow:hidden}
.fl{display:grid;grid-template-columns:minmax(0,1fr) 300px;height:100%;min-height:0}
.fl .cv-wrap{position:relative;height:100%;min-height:0}
.fl .cv{position:absolute;inset:0;overflow:auto;background-color:#F6F7F8;background-image:radial-gradient(circle,#C9CED4 1px,transparent 1.2px);background-size:18px 18px}
.fl .cv-in{position:relative;transform-origin:0 0}
.fl .cv-sz{margin-top:0}
.fl .cv-tl{position:sticky;top:12px;left:12px;z-index:3;display:inline-flex;gap:6px;margin:12px 0 0 12px}
.fl .cv-tl .chip{height:32px;border-radius:8px;background:#fff}
.fl .cv-zm{position:absolute;left:12px;bottom:12px;z-index:3;display:flex;flex-direction:column;gap:2px;background:#fff;border:1px solid var(--nevoa);border-radius:10px;padding:3px;box-shadow:var(--sh-1)}
.nd{position:absolute;width:190px;background:#fff;border:1px solid var(--linha);border-radius:10px;box-shadow:var(--sh-1);font-size:11.5px;cursor:pointer;user-select:none;-webkit-user-select:none}
.nd:hover{border-color:var(--metal)}
.nd:focus-visible{outline:2px solid var(--info);outline-offset:2px}
.nd-h{display:flex;align-items:center;gap:6px;height:34px;padding:0 10px;border-bottom:1px solid var(--nevoa);font-weight:700;font-size:12px}
.nd-h .n,.fx-n{width:18px;height:18px;border-radius:5px;background:var(--tinta);color:#fff;font-size:10px;display:grid;place-items:center;flex:none}
.nd-h svg{color:var(--metal);flex:none}
.nd-r{position:relative;display:flex;align-items:center;gap:6px;height:26px;padding:0 18px 0 10px;color:var(--grafite);border-bottom:1px solid #F0F1F3}
.nd-r:last-child{border-bottom:0}
.nd-r.opt{padding-left:26px;color:var(--chumbo)}
.nd-r.mut{color:var(--t3)}
.nd-r .icb{width:18px;height:18px;border-radius:5px}
.port{position:absolute;right:-5px;top:8px;width:10px;height:10px;border-radius:50%;background:var(--tinta);box-shadow:0 0 0 2px #fff;cursor:crosshair;touch-action:none}
.port::after{content:'';position:absolute;inset:-7px}
.port:hover{transform:scale(1.25)}
.port.none{background:#fff;box-shadow:0 0 0 1.5px var(--err)}
.nd.bad{border-color:var(--err);box-shadow:0 0 0 3px rgba(180,35,24,.10)}
.nd.orfa{border-style:dashed;border-color:var(--warn)}
.nd.on{border-color:var(--info);box-shadow:0 0 0 3px rgba(31,95,191,.14)}
.nd .flag{position:absolute;top:-24px;left:0;height:20px}
.ext{position:absolute;width:166px;display:flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:8px;border:1px dashed var(--metal);background:#fff;font-size:11.5px;color:var(--grafite)}
.ext svg{flex:none}
svg.edges{position:absolute;inset:0;pointer-events:none;overflow:visible}
.edges .lns path{fill:none;stroke:#4A4E54;stroke-width:1.3;stroke-dasharray:4 4}
.edges .lns path.pad{stroke:#A9AFB6}
.edges .hits path{fill:none;stroke:transparent;stroke-width:12;pointer-events:stroke;cursor:pointer}
.edges .hits path:hover{stroke:rgba(31,95,191,.16)}
.edges path.tmp{fill:none;stroke:var(--info);stroke-width:1.6}
.fl .side{border-left:1px solid var(--nevoa);background:#fff;overflow:auto;padding:16px;min-height:0}
.iss{display:flex;gap:10px;padding:10px 0;border-top:1px solid var(--nevoa)}
.iss:first-of-type{border-top:0}
.leg{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--chumbo);padding:4px 0}
.leg .port{flex:none;cursor:default}
.leg .port::after{display:none}
.fx-sel .fx-n{width:22px;height:22px;font-size:11px;border-radius:6px}
.fx-dst{padding:10px 0 0;display:flex;flex-direction:column;gap:6px}
.fx-dst+.fx-dst{border-top:1px solid var(--nevoa);margin-top:10px}

/* ===== 07 Design ===== */
.dz{display:grid;grid-template-columns:380px minmax(0,1fr) 340px;height:100%;min-height:0}
.dz>*{min-height:0}
.th{border-right:1px solid var(--nevoa);overflow:auto;padding:16px 18px 32px;background:#fff}
.th .sec{padding:16px 0;border-top:1px solid var(--nevoa)}
.th .sec:first-of-type{border-top:0;padding-top:4px}
.th .sec>.h3{margin-bottom:10px}
.clr{display:grid;grid-template-columns:40px 1fr;gap:10px;align-items:center}
.clr .big{width:40px;height:40px;border-radius:10px;border:1px solid rgba(14,15,17,.12)}
.fx-cor .v{gap:8px}
.fx-sq{width:16px!important;height:16px;min-height:0!important;padding:0!important;border:1px solid var(--linha)!important;border-radius:4px;flex:none;cursor:pointer;overflow:hidden;background:none}
.fx-sq::-webkit-color-swatch-wrapper{padding:0}
.fx-sq::-webkit-color-swatch{border:0;border-radius:3px}
.fx-sq::-moz-color-swatch{border:0;border-radius:3px}
.fx-cor input[data-hex]{font-variant-numeric:tabular-nums;text-transform:uppercase}
.prev-btn{display:flex;align-items:center;justify-content:center;height:42px;border-radius:10px;font:800 14px 'Manrope',sans-serif;box-shadow:0 3px 0 rgba(0,0,0,.18)}
.prev-btn.fx-claro{background:#E8C547;color:#0E0F11;height:30px;padding:0 12px;font-size:12px;box-shadow:none;white-space:nowrap;flex:none}
.fx-help{display:flex;gap:5px;align-items:flex-start;font-size:11.5px;margin-top:6px;line-height:1.4}
.fx-help svg{flex:none;margin-top:1px}
.fx-help.ok{color:var(--ok)}.fx-help.warn{color:var(--warn)}.fx-help.err{color:var(--err)}
.fx-amostra{margin-top:10px;padding:12px;border:1px solid var(--nevoa);border-radius:10px}
.pg3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pgo{border:1px solid var(--linha);border-radius:10px;padding:10px;cursor:pointer;background:#fff;text-align:left;display:block;width:100%}
.pgo:hover{border-color:var(--metal)}
.pgo.on{border-color:var(--tinta);box-shadow:0 0 0 1px var(--tinta)}
.pgo .demo{height:38px;border-radius:6px;background:var(--gelo);position:relative;overflow:hidden;margin-bottom:8px;display:grid;place-items:center}
.pgo .lbl{font-size:12px;font-weight:600}
.rad{width:28px;height:20px;border:2px solid var(--chumbo);border-right:0;border-bottom:0}
.fx-trk,.fx-fil{position:absolute;left:8px;right:8px;height:4px;border-radius:4px;background:#D9DDDB}
.fx-fil{right:auto}
.fx-cnt{position:absolute;right:8px;top:5px;font:700 9.5px 'Manrope',sans-serif;color:#545A5F}
.fx-logo{width:96px;height:44px;border:1px dashed var(--prata);border-radius:10px;display:grid;place-items:center;flex:none;overflow:hidden;padding:4px}
.fx-logo img{max-width:100%;max-height:100%;object-fit:contain}
.fx-stage{padding-top:72px}
.stage-top{position:absolute;top:12px;left:0;right:0;display:flex;justify-content:center;gap:8px;padding:0 12px}
.phone.fx-pc{width:min(960px,calc(100% - 48px));border-radius:12px}
.hp{border-left:1px solid var(--nevoa);display:flex;flex-direction:column;background:#fff;min-height:0}
.hp-b{flex:1;overflow:auto}
.hdt{width:100%;border-collapse:collapse;font-size:12.5px}
.hdt th{font-size:11px;color:var(--chumbo);font-weight:600;text-align:center;padding:8px 4px;border-bottom:1px solid var(--nevoa);position:sticky;top:0;background:#fff;z-index:1}
.hdt th:first-child{text-align:left;padding-left:16px}
.hdt td{padding:7px 4px;border-bottom:1px solid var(--nevoa);text-align:center}
.hdt td:first-child{text-align:left;padding-left:16px;max-width:150px}
.hdt tr.on td{background:var(--gelo)}
.hdt .n{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:5px;background:var(--gelo);font-size:10px;font-weight:700;margin-right:6px;color:var(--chumbo);flex:none}
.hdt tr.on .n{background:var(--tinta);color:#fff}
.hdt .ck{cursor:pointer}
.hdt .ck.fx-dis{opacity:.4;cursor:not-allowed}
.fx-lk{display:flex;align-items:center;width:100%;text-align:left;font-size:12.5px}
.fx-lk:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--prata)}

/* telas médias: o tema fica mais estreito */
@media (max-width:1360px){
  .dz{grid-template-columns:320px minmax(0,1fr) 300px}
}
@media (max-width:1100px){
  .dz{grid-template-columns:320px minmax(0,1fr)}
  .dz .hp{grid-column:1/-1;border-left:0;border-top:1px solid var(--nevoa)}
  .fx-aba,.dz-aba{overflow:auto}
  .dz{height:auto}
  .dz .th{max-height:none}
}

/* celular: uma coluna, o mapa em cima e a conferência embaixo */
@media (max-width:760px){
  .fl{grid-template-columns:minmax(0,1fr);height:auto}
  .fl .cv-wrap{height:62vh;height:62dvh}
  .fl .side{border-left:0;border-top:1px solid var(--nevoa)}
  .fl .cv-tl .so-largo{display:none}
  .nd{touch-action:pan-x pan-y}
  .dz{grid-template-columns:minmax(0,1fr)}
  .dz .th{border-right:0}
  .dz .stage{padding:72px 16px 32px;overflow:visible}
  .dz .phone{width:100%;max-width:375px}
  .phone.fx-pc{width:100%}
}