/* estruturas.css — gerador de estruturas metálicas
   Cortado de index.html por scripts/cortar-css.js. A ORDEM dos <link> no
   index.html é a ordem original do arquivo e não pode mudar: em CSS quem
   vem depois ganha. O grupo `css` da fumaça guarda isso. */
  /* ---- gerador de estruturas metálicas ---- */
  #tool-estr .estab{background:none;border:none;color:var(--mut);padding:10px 14px;font:inherit;font-size:13.5px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
  #tool-estr .estab:hover{color:var(--tx)}
  #tool-estr .estab.act{color:var(--tx);border-bottom-color:var(--acc)}
  #tool-estr .espanel[hidden]{display:none}
  #tool-estr .es-live{display:grid;grid-template-columns:1fr 1.25fr;gap:18px;align-items:start}
  @media(max-width:960px){#tool-estr .es-live{grid-template-columns:1fr}}
  #tool-estr .es-pvcol{position:sticky;top:14px}
  @media(max-width:960px){#tool-estr .es-pvcol{position:static}}
  #tool-estr .es-seg{display:flex;gap:0;border:1px solid var(--line);border-radius:9px;overflow:hidden;max-width:340px}
  #tool-estr .es-seg button{flex:1;border:none;background:var(--card2);color:var(--tx);padding:9px 6px;font:inherit;font-size:13px;cursor:pointer}
  #tool-estr .es-seg button.on{background:var(--acc);color:#fff;font-weight:600}
  /* Botao de orientacao do tubo. Largura cheia debaixo do <select> a que
     pertence, porque o rotulo dele carrega as duas medidas ("50 de face x 100
     de altura") e nao cabe ao lado. */
  #tool-estr .es-rot{margin-top:6px;width:100%;font-size:12px;padding:6px 8px}
  #tool-estr .es-rot[aria-pressed="true"]{border-color:var(--acc);color:var(--acc)}
  #tool-estr .es-spans{display:flex;flex-direction:column;gap:7px}
  #tool-estr .es-span-row{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center}
  #tool-estr .es-span-row .lbl{font-size:11px;color:var(--mut);width:22px}
  #tool-estr .es-span-row .del{border:1px solid var(--line);background:var(--card2);color:var(--mut);border-radius:7px;height:34px;cursor:pointer;font-size:15px;line-height:1}
  #tool-estr .es-span-row .del:hover{border-color:var(--red);color:var(--red)}
  #tool-estr .es-span-row.warn input{border-color:var(--amber)}
  #tool-estr .es-sumline{font-size:12.5px;margin-top:8px;font-weight:600}
  #tool-estr .es-sumline.ok{color:var(--green)}
  #tool-estr .es-sumline.bad{color:var(--red)}
  #tool-estr .es-pvtabs{display:flex;gap:8px;margin:4px 0 14px;flex-wrap:wrap}
  #tool-estr .es-pv-note{font-size:12.5px;color:var(--mut);margin-bottom:12px}
  #tool-estr .es-sheet{background:#fff;border-radius:6px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.2),0 8px 24px rgba(0,0,0,.25)}
  #tool-estr .es-sheet canvas{display:block;width:100%;height:auto}
  #tool-estr .es-sheet.hide{display:none}