/* qmen.us — free tools (ferramentas/): dish cost calculator, table QR cards, menu maker.
   Loaded after recursos.css (crumbs, page head, article, FAQ, CTA band) and scoped in
   .tools. The printed sheets (#print-root) use container units (cqw), so the same markup
   is the on-screen preview and the paper. */

.tools .tl-free { margin: 12px 0 0; font-size: var(--text-sm); font-weight: 600; color: var(--muted-2); }
.tools [hidden] { display: none !important; }
.tl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── the tool card ───────────────────────────────────────────────────────── */
.tools .tl-app { margin-top: 28px; background: var(--color-base-100); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 24px; box-shadow: 0 1px 2px oklch(0% 0 0/.04); }
.tools .tl-split { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 900px) { .tools .tl-split { grid-template-columns: minmax(0, 1fr); } }
.tools .tl-preview { position: sticky; top: 88px; background: color-mix(in oklab, var(--color-base-content) 6%, var(--color-base-200)); border-radius: var(--radius-card); padding: 18px; max-height: calc(100vh - 110px); overflow: auto; }
@media (max-width: 900px) { .tools .tl-preview { position: static; max-height: none; } }

.tools .tl-form { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.tools .tl-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tools .tl-field > span { font-size: var(--text-sm); font-weight: 700; }
.tools input[type=text], .tools input[type=url], .tools input[type=number], .tools select, .tools textarea {
  width: 100%; min-height: 46px; border: 1px solid var(--line); border-radius: var(--radius-btn); background: var(--color-base-100);
  padding: 8px 12px; font: inherit; font-size: var(--text-base); color: var(--color-base-content); }
.tools textarea { min-height: 0; resize: vertical; line-height: 1.4; }
.tools input:focus, .tools select:focus, .tools textarea:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.tools .tl-help { margin: -6px 0 0; font-size: var(--text-sm); color: var(--muted-2); line-height: 1.45; }
.tools .tl-help.err { color: oklch(52% 0.2 27); font-weight: 600; }
.tools .tl-note { background: color-mix(in oklab, var(--color-primary) 10%, var(--color-base-100)); border: 1px solid color-mix(in oklab, var(--color-primary) 30%, transparent); border-radius: var(--radius-btn); padding: 10px 14px; font-size: var(--text-sm); font-weight: 600; margin-bottom: 14px; }
.tools .tl-fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tools .tl-fieldset legend { font-size: var(--text-sm); font-weight: 700; margin-bottom: 8px; padding: 0; }
.tools .tl-inline { display: flex; flex-wrap: wrap; gap: 12px; }
.tools .tl-inline > .tl-field { flex: 1 1 110px; }
.tools .tl-inline > .tl-short { flex: 0 1 96px; }
.tools .tl-check, .tools .tl-radio { display: flex; align-items: center; gap: 10px; min-height: 40px; font-weight: 600; cursor: pointer; }
.tools .tl-check input, .tools .tl-radio input { width: 20px; height: 20px; accent-color: var(--color-primary); }
.tools .mn-styles { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.tools .tl-swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.tools .tl-swatch { position: relative; width: 40px; height: 40px; border-radius: 50%; background: var(--sw); cursor: pointer; box-shadow: inset 0 0 0 2px oklch(100% 0 0/.5); }
.tools .tl-swatch input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.tools .tl-swatch:has(input:checked) { outline: 3px solid var(--color-base-content); outline-offset: 2px; }
.tools .tl-swatch:has(input:focus-visible) { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.tools .tl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.tools .tl-actions .btn { height: 50px; }
.tools .tl-actions .btn.off { opacity: .45; pointer-events: none; }
.tools .tl-saved { font-size: var(--text-xs); color: var(--muted-2); margin: 0; }

/* ── cards (hub + "more tools") ──────────────────────────────────────────── */
.tools .tl-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-top: 18px; }
.tools .tl-hub { margin-top: 32px; }
.tools a.tl-card { display: flex; gap: 16px; align-items: flex-start; background: var(--color-base-100); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 20px; color: var(--color-base-content); transition: border-color .15s, box-shadow .15s; }
.tools a.tl-card:hover { color: var(--color-base-content); border-color: var(--color-primary); box-shadow: 0 6px 18px oklch(0% 0 0/.07); }
.tools .tl-card-txt { display: flex; flex-direction: column; gap: 6px; }
.tools .tl-card-txt b { font-size: var(--text-lg); font-weight: 800; letter-spacing: -.01em; }
.tools .tl-card-txt span { font-size: var(--text-sm); line-height: 1.5; color: var(--muted); }
.tools .tl-ic { flex: 0 0 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: color-mix(in oklab, var(--color-primary) 12%, transparent); color: var(--color-primary); }
.tools .tl-ic svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tools .tl-more { margin-top: 48px; }
.tools .tl-more h2 { font-size: var(--text-xl); font-weight: 800; margin: 0; }
.tools .tl-art { margin-top: 44px; }
.tools .tl-plug { background: color-mix(in oklab, var(--color-primary) 8%, var(--color-base-100)); border: 1px solid color-mix(in oklab, var(--color-primary) 25%, transparent); border-radius: var(--radius-card); padding: 22px 24px; margin-bottom: 8px; }
.tools .art .tl-plug h2 { margin: 0; font-size: var(--text-xl); }
.tools .tl-plug p { margin: 8px 0 14px; }
.tools .tl-formulas li { font-weight: 600; color: var(--color-base-content); }

/* ── dish cost calculator ────────────────────────────────────────────────── */
.tools .fc-head { display: grid; grid-template-columns: 2fr 1fr 1fr 1.3fr; gap: 14px; align-items: end; }
@media (max-width: 760px) { .tools .fc-head { grid-template-columns: 1fr 1fr; } .tools .fc-dish { grid-column: 1 / -1; } }
.tools .fc-table { margin-top: 22px; }
.tools .fc-row { display: grid; grid-template-columns: minmax(140px, 2fr) minmax(150px, 1.4fr) minmax(90px, 1fr) minmax(150px, 1.4fr) minmax(90px, 1fr) 40px; gap: 8px; align-items: center; padding: 6px 0; }
.tools .fc-th { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--muted-2); border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.tools .fc-cell { min-width: 0; }
.tools .fc-pair { display: grid; grid-template-columns: minmax(0, 1fr) 72px; gap: 6px; }
.tools .fc-pair select { padding: 8px 6px; }
.tools .num { text-align: right; }
.tools .fc-cost { font-weight: 700; font-variant-numeric: tabular-nums; }
.tools .fc-cost.bad { color: oklch(52% 0.2 27); font-size: var(--text-xs); }
.tools .fc-x { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: var(--radius-btn); background: transparent; font-size: 1.3rem; line-height: 1; cursor: pointer; color: var(--muted); }
.tools .fc-x:hover { color: oklch(52% 0.2 27); border-color: currentColor; }
.tools .fc-add { margin-top: 10px; }
@media (max-width: 860px) {
  .tools .fc-th { display: none; }
  .tools .fc-row { grid-template-columns: 1fr 1fr; gap: 10px 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .tools .fc-cell::before { content: attr(data-label); display: block; font-size: var(--text-xs); font-weight: 700; color: var(--muted-2); margin-bottom: 4px; }
  .tools .fc-name { grid-column: 1 / -1; }
  .tools .fc-cost { text-align: left; align-self: end; }
  .tools .fc-del { justify-self: end; align-self: end; }
  .tools .fc-del::before { content: none; }
}
.tools .fc-bottom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 24px; margin-top: 24px; }
@media (max-width: 760px) { .tools .fc-bottom { grid-template-columns: 1fr; } }
.tools .fc-opts { display: flex; flex-direction: column; gap: 14px; }
.tools .fc-results { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-content: start; background: color-mix(in oklab, var(--color-base-content) 4%, var(--color-base-100)); border-radius: var(--radius-card); padding: 18px; }
.tools .fc-kpi { display: flex; flex-direction: column; gap: 4px; }
.tools .fc-kpi span { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--muted-2); }
.tools .fc-kpi b { font-size: var(--text-xl); font-weight: 800; font-variant-numeric: tabular-nums; }
.tools .fc-kpi.big b { font-size: var(--text-2xl); color: var(--color-primary); }
.tools .fc-band { grid-column: 1 / -1; margin: 6px 0 0; font-size: var(--text-sm); font-weight: 600; line-height: 1.45; }
.tools .fc-band.good { color: oklch(46% 0.12 145); }
.tools .fc-band.low { color: oklch(48% 0.1 240); }
.tools .fc-band.high { color: oklch(50% 0.19 35); }

/* ── table QR cards ──────────────────────────────────────────────────────── */
#qr-pages { display: flex; flex-direction: column; gap: 16px; }
.qr-page { container-type: inline-size; width: 100%; aspect-ratio: 210 / 297; background: #fff; color: #1f1a17; box-shadow: 0 2px 10px oklch(0% 0 0/.12); display: grid; padding: 6cqw; gap: 4cqw; font-family: var(--font-sans, system-ui, sans-serif); }
.qr-page.per-6 { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 1fr); }
.qr-page.per-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.qr-page.per-1 { grid-template-columns: 1fr; grid-template-rows: 1fr; padding: 10cqw; }
.qc { border: .5cqw solid var(--qc); border-radius: 3cqw; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2.5cqw; gap: 1.2cqw; min-height: 0; overflow: hidden; }
.qc-name { font-weight: 800; font-size: 3.4cqw; line-height: 1.1; color: var(--qc); }
.qc-head { font-weight: 600; font-size: 2.4cqw; line-height: 1.2; }
.qc-qr { width: 24cqw; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.qc-qr img { width: 100%; height: 100%; display: block; }
.qc-empty { font-size: 2cqw; color: #8a7f76; border: .3cqw dashed #c9beb3; border-radius: 2cqw; padding: 2cqw; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.qc-label { font-weight: 800; font-size: 4.4cqw; line-height: 1; }
.qc-url { font-size: 1.6cqw; color: #6b625b; word-break: break-all; max-width: 100%; }
.per-4 .qc-name { font-size: 4.4cqw; } .per-4 .qc-head { font-size: 3.2cqw; } .per-4 .qc-qr { width: 30cqw; } .per-4 .qc-label { font-size: 5.5cqw; } .per-4 .qc-url { font-size: 2cqw; }
.per-1 .qc { border-width: 1cqw; border-radius: 5cqw; gap: 3cqw; } .per-1 .qc-name { font-size: 8cqw; } .per-1 .qc-head { font-size: 5.6cqw; } .per-1 .qc-qr { width: 52cqw; } .per-1 .qc-label { font-size: 9cqw; } .per-1 .qc-url { font-size: 3cqw; } .per-1 .qc-empty { font-size: 4cqw; }

/* ── menu maker: editor ──────────────────────────────────────────────────── */
.tools .mn-h { font-size: var(--text-lg); font-weight: 800; margin: 10px 0 0; }
.tools .mn-sec { border: 1px solid var(--line); border-radius: var(--radius-card); padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.tools .mn-sec-head { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 40px); gap: 6px; }
.tools .mn-sec-head input { font-weight: 700; }
.tools .mn-item { display: grid; grid-template-columns: minmax(0, 1fr) 96px 40px; gap: 6px; padding-top: 10px; border-top: 1px dashed var(--line); }
.tools .mn-item textarea { grid-column: 1 / -1; font-size: var(--text-sm); }
.tools .mn-ib { width: 40px; height: 46px; border: 1px solid var(--line); border-radius: var(--radius-btn); background: transparent; font-size: 1.1rem; cursor: pointer; color: var(--muted); }
.tools .mn-ib:hover { color: var(--color-base-content); border-color: var(--color-base-content); }
.tools .mn-ib.danger:hover { color: oklch(52% 0.2 27); border-color: currentColor; }
.tools .mn-add-item { align-self: flex-start; }

/* ── menu maker: the sheet (preview and paper) ───────────────────────────── */
.mn-paper { container-type: inline-size; width: 100%; box-shadow: 0 2px 10px oklch(0% 0 0/.12); }
.mn-sheet { min-height: calc(100cqw * var(--ratio, 1.414)); padding: 9cqw 9cqw 8cqw; background: #fff; color: #1f1a17;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.mn-top { text-align: center; margin-bottom: 5cqw; }
.mn-top h1 { margin: 0; font-size: 6.4cqw; line-height: 1.05; letter-spacing: -.01em; overflow-wrap: anywhere; }
.mn-tag { margin: 1.4cqw 0 0; font-size: 2.2cqw; opacity: .75; }
.mn-body { font-size: 2.3cqw; }
.cols-2 .mn-body { column-count: 2; column-gap: 6cqw; }
.mn-part { break-inside: avoid; margin-bottom: 4.5cqw; }
.mn-part h2 { margin: 0 0 2cqw; font-size: 3.1cqw; letter-spacing: .08em; text-transform: uppercase; color: var(--mc); break-after: avoid; }
.mn-row { break-inside: avoid; margin-bottom: 2cqw; }
.mn-line { display: flex; align-items: baseline; gap: 1.2cqw; }
.mn-name { font-weight: 700; overflow-wrap: anywhere; }
.mn-dots { flex: 1 1 auto; min-width: 2cqw; border-bottom: .25cqw dotted currentColor; opacity: .45; transform: translateY(-.5cqw); }
.mn-price { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mn-desc { margin: .6cqw 0 0; font-size: 1.85cqw; line-height: 1.35; opacity: .72; }
.mn-foot { display: flex; align-items: center; justify-content: center; gap: 4cqw; margin-top: 5cqw; padding-top: 3cqw; border-top: .25cqw solid color-mix(in srgb, currentColor 20%, transparent); break-inside: avoid; }
.mn-qr { display: flex; align-items: center; gap: 2cqw; font-size: 1.9cqw; font-weight: 700; max-width: 50%; }
.mn-qr img { width: 13cqw; height: 13cqw; background: #fff; padding: .6cqw; border-radius: 1cqw; }
.mn-note { margin: 0; font-size: 1.8cqw; opacity: .75; text-align: center; }

.st-classic { background: #fbf6ec; font-family: Georgia, "Times New Roman", serif; }
.st-classic .mn-top h1 { color: var(--mc); font-weight: 700; }
.st-classic .mn-part h2 { text-align: center; font-weight: 700; }
.st-classic .mn-part h2::after { content: ""; display: block; width: 10cqw; height: .3cqw; background: var(--mc); margin: 1.2cqw auto 0; opacity: .6; }

.st-modern { font-family: var(--font-sans, system-ui, sans-serif); }
.st-modern .mn-top { text-align: left; border-left: 1.6cqw solid var(--mc); padding-left: 3cqw; }
.st-modern .mn-top h1 { font-weight: 900; }
.st-modern .mn-part h2 { font-weight: 900; letter-spacing: .02em; }
.st-modern .mn-dots { visibility: hidden; }
.st-modern .mn-price { color: var(--mc); }

.st-chalk { background: #23292b; color: #f2efe6; font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", "Chalkboard SE", cursive; }
.st-chalk .mn-top h1 { color: #fff; }
.st-chalk .mn-part h2 { color: color-mix(in srgb, var(--mc) 40%, #ffe9b8); text-align: center; }
.st-chalk .mn-dots { border-bottom-style: dashed; }

.st-minimal { font-family: "Helvetica Neue", Arial, sans-serif; color: #111; }
.st-minimal .mn-top h1 { font-weight: 300; letter-spacing: .12em; text-transform: uppercase; font-size: 5.2cqw; }
.st-minimal .mn-part h2 { color: #111; font-weight: 600; font-size: 2.2cqw; letter-spacing: .2em; border-bottom: .2cqw solid #111; padding-bottom: 1cqw; }
.st-minimal .mn-name { font-weight: 500; }
.st-minimal .mn-dots { visibility: hidden; }
.st-minimal .mn-price { font-weight: 500; }

/* ── print: only #print-root ─────────────────────────────────────────────── */
#print-root { display: none; }
@media print {
  @page { margin: 0; }
  html, body { background: #fff !important; margin: 0 !important; padding: 0 !important; }
  body > *:not(#print-root) { display: none !important; }
  #print-root { display: block !important; container-type: inline-size; width: 100%; }
  #print-root .qr-page { width: 210mm; height: 297mm; aspect-ratio: auto; box-shadow: none; break-after: page; }
  #print-root .qr-page:last-child { break-after: auto; }
  #print-root .mn-sheet { min-height: calc(100cqw * var(--ratio, 1.414)); }
  .pr-sheet { padding: 16mm 15mm; font: 11pt/1.4 var(--font-sans, system-ui, sans-serif); color: #111; }
  .pr-sheet .pr-kicker { margin: 0; font-size: 9pt; text-transform: uppercase; letter-spacing: .08em; color: #666; }
  .pr-sheet h1 { margin: 2mm 0 1mm; font-size: 20pt; }
  .pr-sheet .pr-meta { margin: 0 0 6mm; color: #444; }
  .pr-sheet table { width: 100%; border-collapse: collapse; }
  .pr-sheet th, .pr-sheet td { border-bottom: 1px solid #ccc; padding: 2mm 1.5mm; text-align: left; }
  .pr-sheet th { font-size: 8.5pt; text-transform: uppercase; letter-spacing: .05em; }
  .pr-sheet .num { text-align: right; }
  .pr-sheet .pr-sums { display: grid; grid-template-columns: auto auto; justify-content: end; gap: 1.5mm 8mm; margin: 6mm 0 0; }
  .pr-sheet .pr-sums dt { color: #555; }
  .pr-sheet .pr-sums dd { margin: 0; font-weight: 700; text-align: right; }
  .pr-sheet .pr-foot { margin-top: 10mm; font-size: 8pt; color: #888; }
}