/* Ferramentas grátis da v2. Usa os tokens de quaddro2.css (cores, raios, sombras, Circular). */

/* Área da ferramenta */
.tool-app [hidden]{display:none!important}
.tool-sec{padding:0 0 72px;margin-top:-8px}
.tool-app{position:relative;background:#fff;border:1px solid var(--g150);border-radius:var(--r-xl);box-shadow:var(--sh);padding:32px}
.ta-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start}
.ta-grid.out-wide{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.ta-grid.one{grid-template-columns:minmax(0,1fr)}
.ta-sticky{position:sticky;top:96px}
.ta-block+.ta-block{border-top:1px solid var(--g150);margin-top:24px;padding-top:24px}
.ta-h{display:flex;align-items:center;gap:10px;font-size:1.0625rem;line-height:1.5rem;font-weight:600;letter-spacing:-.03em;color:var(--ink);margin-bottom:16px}
.ta-h .n{width:26px;height:26px;border-radius:50%;background:var(--brand-50);color:var(--brand);font-size:.8125rem;display:inline-flex;align-items:center;justify-content:center;flex:none}
.ta-sub{font-size:.875rem;line-height:1.25rem;color:var(--g500);margin:-8px 0 16px}

/* Campos */
.fld{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;min-width:0}
.fld>label,.lbl{font-size:.875rem;line-height:1.25rem;font-weight:500;color:var(--ink-2)}
.fld .opt-t{font-weight:400;color:var(--g500)}
.hint{font-size:.78125rem;line-height:1.125rem;color:var(--g500)}
.err{font-size:.78125rem;line-height:1.125rem;color:#b91c1c}
.err:empty{display:none}
.inp{width:100%;height:46px;border:1px solid var(--g200);border-radius:10px;padding:0 14px;font:inherit;font-size:.9375rem;letter-spacing:-.016em;background:#fff;color:var(--ink);transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none}
textarea.inp{height:auto;min-height:104px;padding:12px 14px;line-height:1.375rem;resize:vertical}
select.inp{padding-right:36px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236b7280' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.inp::placeholder{color:var(--g400)}
.inp:hover{border-color:var(--g300)}
.inp:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-100)}
.inp[aria-invalid="true"]{border-color:#dc2626;box-shadow:0 0 0 3px #fee2e2}
.inp-pre{display:flex;align-items:stretch}
.inp-pre>span{display:flex;align-items:center;padding:0 12px;border:1px solid var(--g200);border-right:0;border-radius:10px 0 0 10px;background:var(--g50);font-size:.875rem;color:var(--g600);white-space:nowrap}
.inp-pre>.inp{border-radius:0 10px 10px 0}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}
.row3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 14px}
.chk{display:flex;align-items:center;gap:10px;font-size:.9375rem;color:var(--ink-2);cursor:pointer}
.chk input{width:18px;height:18px;accent-color:var(--brand)}

/* Envio de imagem */
.upl{display:flex;align-items:center;gap:14px;padding:12px;border:1px dashed var(--g300);border-radius:12px;background:var(--g50);cursor:pointer;transition:border-color .15s,background-color .15s}
.upl:hover,.upl:focus-within{border-color:var(--brand);background:var(--brand-50)}
.upl input{position:absolute;width:1px;height:1px;opacity:0}
.upl .th{width:56px;height:56px;border-radius:10px;background:#fff;border:1px solid var(--g150);display:flex;align-items:center;justify-content:center;overflow:hidden;flex:none;color:var(--g400)}
.upl .th img{width:100%;height:100%;object-fit:contain}
.upl .tx{display:flex;flex-direction:column;gap:2px;font-size:.875rem;line-height:1.25rem;color:var(--ink-2)}
.upl .tx small{font-size:.75rem;color:var(--g500)}
.upl-rm{font-size:.8125rem;color:var(--g600);text-decoration:underline;text-underline-offset:3px;margin-left:auto}

/* Cores */
.swatches{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.sw{width:32px;height:32px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--g200);cursor:pointer;transition:transform .15s,box-shadow .15s}
.sw:hover{transform:scale(1.08)}
.sw[aria-pressed="true"]{box-shadow:0 0 0 2px var(--ink)}
.sw-custom{position:relative;overflow:hidden;background:conic-gradient(#f43f5e,#f59e0b,#22c55e,#06b6d4,#6366f1,#d946ef,#f43f5e)}
.sw-custom input{position:absolute;inset:-8px;width:48px;height:48px;opacity:0;cursor:pointer}

/* Resultado */
.out{background:var(--g50);border:1px solid var(--g150);border-radius:var(--r-lg);padding:20px}
.out-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;min-height:220px;color:var(--g500);font-size:.9375rem;line-height:1.375rem}
.out-empty .ico{width:32px;height:32px;color:var(--g400)}
.out-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.875rem;line-height:1.375rem;letter-spacing:0;word-break:break-all;background:#fff;border:1px solid var(--g150);border-radius:10px;padding:12px 14px;color:var(--ink)}
.ta-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.ta-actions .btn{flex:0 0 auto}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none!important}
.pdf-frame{width:100%;height:640px;border:1px solid var(--g150);border-radius:var(--r);background:#fff}
.privacy{display:flex;gap:8px;align-items:flex-start;font-size:.8125rem;line-height:1.1875rem;color:var(--g500);margin-top:16px}
.privacy .ico{width:16px;height:16px;flex:none;color:var(--green);margin-top:1px}

/* Aviso rápido */
.qt-toast{position:fixed;left:50%;bottom:28px;z-index:80;transform:translate(-50%,16px);opacity:0;pointer-events:none;background:var(--ink);color:#fff;font-size:.875rem;font-weight:500;padding:10px 16px;border-radius:999px;box-shadow:var(--sh-xl);transition:opacity .2s,transform .2s var(--ease)}
.qt-toast.on{opacity:1;transform:translate(-50%,0)}

/* Índice e "outras ferramentas" */
.tools-idx h2{margin:40px 0 16px}
.tools-idx h2:first-child{margin-top:0}
.more-tools{border-top:1px solid var(--g150);padding-top:56px}

@media (max-width:860px){
  .tool-app{padding:20px;border-radius:var(--r-lg)}
  .ta-grid,.ta-grid.out-wide{grid-template-columns:minmax(0,1fr);gap:28px}
  .ta-sticky{position:static}
  .row2,.row3{grid-template-columns:minmax(0,1fr)}
  .pdf-frame{height:480px}
  .tool-sec{padding-bottom:48px}
  .tools-idx .tools{grid-auto-flow:row;grid-template-columns:minmax(0,1fr);grid-auto-columns:auto;overflow:visible;margin:0;padding:0;scroll-snap-type:none}
}
@media (prefers-reduced-motion:reduce){.sw,.qt-toast,.inp{transition:none}}