/* ==========================================================================
   Zavora Free Tools — /tools/* (se carga después de site.css y usa sus tokens).
   Mismas reglas que site.css: sin degradados, sin vidrio, sin glow, sin !important.
   Blanco, tinta negra, violeta de marca; bordes suaves y sombra solo donde hay que tocar.
   Contrato con el JS (tools.js y assets/tools/*.js): [data-tool-root], [data-after-result][hidden],
   .tl-toast.is-on, .is-bad/.is-ok en las pistas, body.tl-printing + .tl-print-sheet.
   ========================================================================== */

/* ---------- Hero compacto: la herramienta tiene que verse sin hacer scroll ---------- */
.tl-hero { padding: 36px 0 28px; }
.tl-hero .breadcrumb { margin-bottom: 14px; }
.tl-hero__title { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.85rem); max-width: 22ch; }
.tl-hero__title--xl { font-size: clamp(2.2rem, 1.4rem + 3.4vw, 3.6rem); max-width: 18ch; }
.tl-hero__title em { font-style: normal; color: var(--brand); }
.tl-hero__lead { margin-top: 12px; font-size: 1.125rem; color: var(--ink-2); max-width: 60ch; }
.tl-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.tl-hero--hub { padding: 56px 0 40px; background: var(--bg) var(--dots); background-size: 18px 18px; border-bottom: 1px solid var(--line); }
.tl-hero--hub .container { position: relative; }
.tl-trust { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 18px; font-size: .875rem; color: var(--ink-2); }
.tl-trust li { display: inline-flex; align-items: center; gap: 6px; }
.tl-trust .icon { color: var(--ok); stroke-width: 2.4; }
.tl-meta { margin: 0 0 8px; }
.tl-noscript { padding: 14px 18px; border: 1px solid var(--warn); border-radius: var(--r); background: var(--warn-bg); color: var(--warn); }

/* ---------- La herramienta: formulario a la izquierda, resultado vivo a la derecha ---------- */
[data-tool-root] [hidden], .tlv [hidden], .tlv-bar[hidden] { display: none; }
.tl-app { padding: 4px 0 56px; }
.tl-tool { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); background: #fff; border: 1px solid var(--line-strong); border-radius: 20px; box-shadow: var(--shadow); overflow: hidden; overflow: clip; } /* clip, no hidden: hidden vuelve a la tarjeta el contenedor del sticky */
.tl-tool--single { grid-template-columns: minmax(0, 1fr); }
.tl-tool__form { padding: 28px; min-width: 0; }
.tl-tool__result { padding: 28px; background: var(--bg-alt); border-left: 1px solid var(--line); min-width: 0; }
.tl-tool__sticky { position: sticky; top: calc(var(--nav-h) + 20px); }
.tl-section + .tl-section { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.tl-section__t { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; font: 600 .78rem/1.2 var(--f-body); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.tl-section__t .tl-link { text-transform: none; letter-spacing: 0; font-size: .875rem; min-height: 32px; display: inline-flex; align-items: center; white-space: nowrap; }

.tl-field { display: block; min-width: 0; }
.tl-field + .tl-field { margin-top: 14px; }
.tl-label { display: block; margin-bottom: 6px; font-size: .875rem; font-weight: 600; color: var(--ink); }
.tl-label small { font-weight: 400; color: var(--ink-3); }
.tl-input { width: 100%; height: 46px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--r); background: #fff; font: inherit; font-size: 1rem; color: var(--ink); transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.tl-input::placeholder { color: #9a94aa; }
.tl-input:hover { border-color: var(--ink-3); }
.tl-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.tl-input[aria-invalid="true"] { border-color: var(--bad); }
textarea.tl-input { height: auto; min-height: 96px; padding: 12px 14px; resize: vertical; line-height: 1.5; }
select.tl-input { padding-right: 30px; appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236e6880' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center; }
.tl-hint { margin-top: 6px; min-height: 1.25em; font-size: .8125rem; color: var(--ink-3); }
.tl-hint.is-bad { color: var(--bad); }
.tl-hint.is-ok { color: var(--ok); }
.tl-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.tl-row + .tl-field, .tl-field + .tl-row, .tl-row + .tl-row { margin-top: 14px; }
.tl-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tl-row > .tl-field + .tl-field { margin-top: 0; }
.tl-phone__row { display: grid; grid-template-columns: minmax(0, 12.5rem) minmax(0, 1fr); gap: 8px; }
.tl-check { display: flex; gap: 10px; align-items: flex-start; font-size: .9375rem; color: var(--ink-2); cursor: pointer; }
.tl-check input { width: 18px; height: 18px; margin-top: 3px; flex-shrink: 0; accent-color: var(--brand); }

/* Filas de productos (pedido, cotización, catálogo) */
.tl-items { display: flex; flex-direction: column; gap: 10px; }
.tl-item { display: grid; grid-template-columns: minmax(0, 1fr) 84px 128px 40px; gap: 8px; align-items: end; }
.tl-item .tl-label { font-size: .75rem; font-weight: 500; color: var(--ink-3); margin-bottom: 4px; }
.tl-item:not(:first-child) .tl-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tl-icon-btn { display: grid; place-items: center; width: 40px; height: 46px; border: 1px solid var(--line); border-radius: var(--r); color: var(--ink-3); background: #fff; transition: color var(--t) var(--ease), border-color var(--t) var(--ease); }
.tl-icon-btn:hover { color: var(--bad); border-color: var(--bad); }
.tl-icon-btn:disabled { opacity: .35; cursor: not-allowed; }
.tl-icon-btn:disabled:hover { color: var(--ink-3); border-color: var(--line); }
.tl-add { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 8px 2px; font-weight: 600; font-size: .9375rem; color: var(--brand-ink); }
.tl-add:hover { color: var(--brand); }
.tl-link { color: var(--brand-ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--brand-line); text-underline-offset: 3px; }
.tl-link:hover { text-decoration-color: var(--brand); }
.tl-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tl-chip { padding: 6px 11px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: .8125rem; color: var(--ink-2); background: #fff; transition: border-color var(--t) var(--ease), color var(--t) var(--ease); }
.tl-chip:hover, .tl-chip[aria-pressed="true"] { border-color: var(--brand); color: var(--brand-ink); }

/* ---------- Resultado ---------- */
.tl-result__k { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font: 600 .78rem/1.2 var(--f-body); letter-spacing: .07em; text-transform: uppercase; color: var(--brand-ink); }
.tl-result__k::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); transition: background-color var(--t) var(--ease); }
.tl-result.is-ready .tl-result__k::before { background: var(--ok); }
.tl-empty { padding: 22px; border: 1px dashed var(--line-strong); border-radius: var(--r-lg); color: var(--ink-3); font-size: .9375rem; text-align: center; background: #fff; }
.tl-out { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--r); background: #fff; font: 500 .9375rem/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--ink); overflow-wrap: anywhere; word-break: break-all; }
.tl-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.tl-actions .btn { flex: 1 1 auto; }
.tl-actions--stack { flex-direction: column; }
.btn--wa { background: var(--wa-head); color: #fff; }
.btn--wa:hover { background: #006d59; }
.btn--wa:focus-visible { outline-color: var(--ink); }
.btn[aria-disabled="true"], .btn:disabled { opacity: .45; pointer-events: none; }
.btn .icon { width: 18px; height: 18px; }
.tl-note { margin-top: 12px; font-size: .8125rem; color: var(--ink-3); }

/* Previsualizaciones largas: se desplazan dentro del panel (el panel es sticky) */
.tl-result .tl-catalog, .tl-result .tl-doc { max-height: min(64vh, 680px); overflow-y: auto; overscroll-behavior: contain; }
.tl-preview { margin-top: 14px; }
.tl-preview summary { cursor: pointer; font-size: .875rem; list-style: none; }
.tl-preview summary::-webkit-details-marker { display: none; }
.tl-preview summary::before { content: "+ "; }
.tl-preview[open] summary::before { content: "− "; }
.tl-preview[open] summary { margin-bottom: 10px; }

/* Vista previa de WhatsApp (reutiliza .wa de site.css) */
.tl-wa { margin-top: 4px; }
.tl-wa .wa__thread { min-height: 120px; max-height: 420px; overflow-y: auto; }
.tl-wa .wa__b { max-width: 94%; font-size: .875rem; }

/* Resumen del pedido */
.tl-summary { padding: 18px 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); }
.tl-summary__head { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.tl-summary__head p { font-size: .8125rem; color: var(--ink-3); }
.tl-summary__head strong { display: block; font-size: 1rem; color: var(--ink); }
.tl-lines { margin: 8px 0; }
.tl-lines li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: .9375rem; border-bottom: 1px dashed var(--line); }
.tl-lines li:last-child { border-bottom: 0; }
.tl-lines span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink-2); }
.tl-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 12px; border-top: 1px solid var(--line); font-weight: 700; }
.tl-total strong { font-family: var(--f-display); font-size: 1.35rem; }
.tl-summary__notes { margin-top: 10px; font-size: .875rem; color: var(--ink-2); }

/* Panel «compartir» (link para clientes) */
.tl-share { margin-top: 22px; padding: 18px 20px; border: 1px solid var(--brand-line); border-radius: var(--r-lg); background: #fff; }
.tl-share__t { font-family: var(--f-display); font-weight: 700; font-size: 1.05rem; }
.tl-share__d { margin-top: 4px; font-size: .9rem; color: var(--ink-2); }
.tl-share .tl-check { margin-top: 12px; }
.tl-share .tl-out { display: block; margin-top: 12px; font-size: .8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; word-break: normal; overflow-wrap: normal; }
.tl-qrbox { display: flex; gap: 16px; align-items: center; margin-top: 14px; }
.tl-qrbox canvas { width: 128px; height: auto; border: 1px solid var(--line); border-radius: var(--r); background: #fff; }

/* ---------- CTA suave (después del primer resultado) ---------- */
.tl-next { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; margin-top: 20px; padding: 20px 24px; border: 1px solid var(--brand-line); border-radius: var(--r-lg); background: var(--brand-tint); }
.tl-next[hidden] { display: none; }
.tl-next.is-in { animation: rise var(--d-enter) var(--ease) both; }
.tl-next__mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #fff; color: var(--brand); border: 1px solid var(--brand-line); }
.tl-next__mark .zv-mark { fill: var(--brand); }
.tl-next__t { font-family: var(--f-display); font-weight: 700; font-size: 1.1rem; color: var(--ink); }
.tl-next__txt p:last-child { font-size: .9375rem; color: var(--ink-2); }
.tl-next__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Toast ---------- */
.tl-toast { position: fixed; left: 50%; bottom: 24px; width: max-content; max-width: calc(100vw - 32px); text-align: center; z-index: 70; transform: translate(-50%, 16px); padding: 10px 16px; border-radius: 999px; background: var(--ink); color: #fff; font-size: .875rem; font-weight: 500; opacity: 0; pointer-events: none; transition: opacity var(--d-fast) var(--ease), transform var(--d-fast) var(--ease); }
.tl-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.tl-toast--bad { background: var(--bad); }
.tl-offscreen { position: fixed; left: -9999px; top: 0; width: 1px; height: 1px; opacity: 0; }
.tl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Tarjetas de herramientas (ToolCard) ---------- */
.tl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tl-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 22px; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; transition: border-color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease), transform var(--d-fast) var(--ease); }
a.tl-card:hover { border-color: var(--brand); box-shadow: var(--shadow); }
.tl-card__icon { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 8px; border-radius: 11px; background: var(--brand-tint); color: var(--brand-ink); }
.tl-card__k { font-size: .72rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.tl-card__t { font-family: var(--f-display); font-size: 1.12rem; color: var(--ink); letter-spacing: -.01em; }
.tl-card__d { font-size: .9rem; color: var(--ink-2); }
.tl-card__go { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 10px; font-weight: 600; font-size: .9rem; color: var(--brand-ink); }
.tl-card__go .icon { transition: transform var(--d-fast) var(--ease); }
a.tl-card:hover .tl-card__go .icon { transform: translateX(3px); }
.tl-card--soon { background: var(--bg); border-style: dashed; }
.tl-card--soon .tl-card__icon { background: var(--bg-alt); color: var(--ink-3); }
.tl-card--soon .tl-card__t { color: var(--ink-2); }
.tl-badge { align-self: flex-start; margin-top: auto; padding: 3px 10px; border-radius: 999px; background: var(--bg-alt); border: 1px solid var(--line); font-size: .72rem; font-weight: 600; letter-spacing: .04em; color: var(--ink-3); }
.tl-card--soon .tl-badge { margin-top: 12px; }

/* Hubs */
.tl-hub { padding-top: 48px; }
.tl-doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 56px; }
.tl-door { display: flex; flex-direction: column; gap: 4px; padding: 22px; border: 1px solid var(--ink); border-radius: var(--r-lg); background: var(--ink); color: #fff; transition: transform var(--d-fast) var(--ease); }
.tl-door:hover { transform: translateY(-2px); }
.tl-door__icon { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 10px; border-radius: 11px; background: var(--brand); color: #fff; }
.tl-door strong { font-family: var(--f-display); font-size: 1.35rem; }
.tl-door span { font-size: .9rem; color: var(--dark-muted); }
.tl-door em { margin-top: 10px; font-style: normal; font-size: .8125rem; font-weight: 600; color: #cdb4ff; }
.tl-door--soon { background: #fff; color: var(--ink); border-color: var(--line); }
.tl-door--soon span { color: var(--ink-2); }
.tl-door--soon em { color: var(--ink-3); }
.tl-door--soon .tl-door__icon { background: var(--bg-alt); color: var(--ink-3); }
.tl-cat + .tl-cat { margin-top: 56px; }
.tl-cat__head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.tl-cat__head > div { flex: 1; }
.tl-cat__head p { font-size: .9375rem; color: var(--ink-2); }
.tl-cat__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--brand-tint); color: var(--brand-ink); }
.tl-cat__t { font-size: 1.5rem; }

/* Cómo funciona / beneficios / relacionadas / Academy */
.tl-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 28px; counter-reset: none; }
.tl-step { padding: 22px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); }
.tl-step__n { display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 14px; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 700; font-size: .9rem; }
.tl-step h3 { font-size: 1.1rem; margin-bottom: 6px; }
.tl-step p { font-size: .9375rem; color: var(--ink-2); }
.tl-benefits { padding: 72px 0; }
.tl-benefits__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 40px; margin-top: 28px; }
.tl-benefit { display: flex; gap: 14px; padding: 16px 0; border-top: 1px solid var(--line); }
.tl-benefit > .icon { width: 22px; height: 22px; margin-top: 2px; color: var(--brand); }
.tl-benefit h3 { font-family: var(--f-body); font-size: 1rem; font-weight: 600; letter-spacing: 0; margin-bottom: 4px; }
.tl-benefit p { font-size: .9375rem; color: var(--ink-2); }
.tl-related { padding: 72px 0; }
.tl-related__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.tl-related__head .section__lead { margin-top: 8px; }
.tl-academy { padding: 0 0 72px; }
.tl-academy__inner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: 26px 28px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-alt); }
.tl-academy__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: #fff; border: 1px solid var(--line); color: var(--brand-ink); }
.tl-academy__k { font-size: .75rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--brand-ink); }
.tl-academy__t { font-size: 1.35rem; margin: 2px 0 4px; }
.tl-academy__txt p:last-child { font-size: .9375rem; color: var(--ink-2); }
.tl--hub .tl-academy { padding-top: 0; }

/* ---------- Documento (cotización) ---------- */
.tl-doc { padding: 26px 26px 22px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 1px 2px rgba(20, 17, 28, .05); font-size: .875rem; color: var(--ink); }
.tl-doc__top { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; padding-bottom: 14px; border-bottom: 2px solid var(--ink); }
.tl-doc__biz { font-family: var(--f-display); font-weight: 700; font-size: 1.15rem; }
.tl-doc__sub { color: var(--ink-3); font-size: .8rem; }
.tl-doc__k { text-align: right; }
.tl-doc__k strong { display: block; font-family: var(--f-display); font-size: 1.05rem; letter-spacing: .06em; color: var(--brand-ink); }
.tl-doc__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; padding: 14px 0; }
.tl-doc__meta dt { font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.tl-doc__meta dd { margin: 2px 0 0; font-weight: 500; overflow-wrap: anywhere; }
.tl-doc table { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.tl-doc th { padding: 8px 6px; text-align: left; font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--line-strong); }
.tl-doc td { padding: 8px 6px; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.tl-doc .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tl-doc__totals { margin: 12px 0 0 auto; width: min(100%, 280px); }
.tl-doc__totals div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-variant-numeric: tabular-nums; }
.tl-doc__totals .is-total { margin-top: 6px; padding-top: 8px; border-top: 2px solid var(--ink); font-weight: 700; font-size: 1.05rem; }
.tl-doc__notes { margin-top: 16px; padding: 10px 12px; border-radius: 8px; background: var(--bg-alt); font-size: .8125rem; color: var(--ink-2); white-space: pre-line; }
.tl-doc__foot { margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--line); font-size: .72rem; color: var(--ink-3); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ---------- Catálogo ---------- */
.tl-prod { padding: 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; }
.tl-prod + .tl-prod { margin-top: 12px; }
.tl-prod__grid { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; }
.tl-prod__img { position: relative; display: grid; place-items: center; width: 96px; height: 96px; border: 1px dashed var(--line-strong); border-radius: var(--r); background: var(--bg-alt) center / cover no-repeat; color: var(--ink-3); font-size: .72rem; text-align: center; cursor: pointer; overflow: hidden; }
.tl-prod__img img { width: 100%; height: 100%; object-fit: cover; }
.tl-prod__img input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.tl-prod__img:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }
.tl-prod__fields { display: grid; grid-template-columns: minmax(0, 1fr) 132px; gap: 8px; }
.tl-prod__fields .tl-input { height: 40px; font-size: .9375rem; }
.tl-prod__fields .span-2 { grid-column: 1 / -1; }
.tl-prod__bar { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.tl-prod__bar button { font-size: .8125rem; color: var(--ink-3); display: inline-flex; gap: 6px; align-items: center; }
.tl-prod__bar button:hover { color: var(--bad); }
.tl-catalog { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.tl-catalog__head { padding: 18px 20px; background: var(--ink); color: #fff; }
.tl-catalog__head strong { display: block; font-family: var(--f-display); font-size: 1.25rem; }
.tl-catalog__head span { font-size: .8125rem; color: var(--dark-muted); }
.tl-catalog__cat { padding: 14px 20px 4px; font: 600 .75rem/1.2 var(--f-body); letter-spacing: .07em; text-transform: uppercase; color: var(--brand-ink); }
.tl-catalog__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 8px 20px 20px; }
.tl-pc { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.tl-pc__img { aspect-ratio: 1 / 1; background: var(--bg-alt); display: grid; place-items: center; color: var(--line-strong); }
.tl-pc__img img { width: 100%; height: 100%; object-fit: cover; }
.tl-pc__img .icon { width: 32px; height: 32px; }
.tl-pc__img--empty { aspect-ratio: 3 / 1; }
.tl-pc__img--empty .icon { width: 22px; height: 22px; }
.tl-pc__b { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px 12px; flex: 1; }
.tl-pc__n { font-weight: 600; font-size: .9rem; line-height: 1.3; overflow-wrap: anywhere; }
.tl-pc__p { font-family: var(--f-display); font-weight: 700; color: var(--brand-ink); }
.tl-pc__d { font-size: .78rem; color: var(--ink-2); line-height: 1.4; overflow-wrap: anywhere; }
.tl-pc__cta { display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin-top: auto; padding-top: 8px; height: 34px; border-radius: 8px; background: var(--wa-head); color: #fff; font-size: .8rem; font-weight: 600; }
.tl-pc__cta:hover { background: #006d59; }
.tl-pc__cta .icon { width: 15px; height: 15px; }
.tl-catalog__foot { padding: 10px 20px 14px; font-size: .72rem; color: var(--ink-3); border-top: 1px solid var(--line); }

/* ---------- QR ---------- */
.tl-qr { display: grid; place-items: center; padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); }
.tl-qr canvas { width: min(100%, 280px); height: auto; image-rendering: pixelated; }
.tl-qr__ph { display: grid; place-items: center; width: min(100%, 280px); aspect-ratio: 1 / 1; border: 1px dashed var(--line-strong); border-radius: var(--r); color: var(--ink-3); font-size: .875rem; text-align: center; padding: 20px; }

/* ---------- Vista del cliente (/tools/whatsapp/order) ---------- */
.tlv-page { background: var(--bg-alt); }
.tlv-top { background: #fff; border-bottom: 1px solid var(--line); }
.tlv-top__in { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 56px; }
.tlv-top .zv-word { font-size: .9rem; }
.tlv-top .zv-mark { width: 22px; height: 21px; }
.tlv-top__make { font-size: .8125rem; font-weight: 600; color: var(--brand-ink); }
.tlv { padding: 24px 0 120px; }
.tlv__in { max-width: 720px; }
.tlv-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 22px; box-shadow: 0 1px 2px rgba(20, 17, 28, .05); }
.tlv-card + .tlv-card { margin-top: 14px; }
.tlv__biz { display: flex; align-items: center; gap: 14px; }
.tlv__ava { display: grid; place-items: center; flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 700; font-size: 1.1rem; }
.tlv__title { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.8rem); }
.tlv__sub { font-size: .9rem; color: var(--ink-2); }
.tlv-prods { display: flex; flex-direction: column; }
.tlv-prod { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.tlv-prod:last-child { border-bottom: 0; }
.tlv-prod__n { font-weight: 600; overflow-wrap: anywhere; }
.tlv-prod__d { font-size: .8125rem; color: var(--ink-2); overflow-wrap: anywhere; }
.tlv-prod__p { font-size: .875rem; font-weight: 600; color: var(--brand-ink); }
.tlv-cat { padding: 16px 0 4px; font: 600 .75rem/1.2 var(--f-body); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.tl-step-qty { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: 999px; background: #fff; }
.tl-step-qty button { display: grid; place-items: center; width: 40px; height: 40px; color: var(--brand-ink); border-radius: 999px; }
.tl-step-qty button:hover { background: var(--brand-tint); }
.tl-step-qty button:disabled { color: var(--line-strong); background: none; cursor: default; }
.tl-step-qty input { width: 44px; height: 40px; border: 0; text-align: center; font: 600 1rem var(--f-body); color: var(--ink); background: none; -moz-appearance: textfield; }
.tl-step-qty input::-webkit-outer-spin-button, .tl-step-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tl-step-qty input:focus { outline: none; }
.tl-step-qty:focus-within { box-shadow: 0 0 0 3px var(--brand-tint); border-color: var(--brand); }
.tlv-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -8px 24px -12px rgba(20, 17, 28, .2); }
.tlv-bar__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 720px; padding-top: 12px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
.tlv-bar__sum { font-size: .8125rem; color: var(--ink-3); }
.tlv-bar__sum strong { display: block; font-family: var(--f-display); font-size: 1.2rem; color: var(--ink); }
.tlv-err { padding: 28px; text-align: center; }
.tlv-err h2 { font-size: 1.3rem; margin-bottom: 8px; }
.tlv-err p { color: var(--ink-2); }
.tlv-foot { padding: 24px 0 120px; font-size: .8125rem; color: var(--ink-3); text-align: center; }
.tlv-foot p + p { margin-top: 6px; }
.tlv-foot a { color: var(--brand-ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .tl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tl-steps { grid-template-columns: 1fr; }
  .tl-next { grid-template-columns: auto minmax(0, 1fr); }
  .tl-next__actions { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .tl-tool { grid-template-columns: minmax(0, 1fr); border-radius: 16px; }
  .tl-tool__result { border-left: 0; border-top: 1px solid var(--line); }
  .tl-tool__sticky { position: static; }
  .tl-doors { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-bottom: 40px; }
  .tl-door { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 16px 18px; }
  .tl-door__icon { margin: 0; }
  .tl-door span { flex-basis: 100%; }
  .tl-door em { margin: 0 0 0 auto; }
  .tl-benefits__grid { grid-template-columns: minmax(0, 1fr); }
  .tl-academy__inner { grid-template-columns: auto minmax(0, 1fr); }
  .tl-academy__inner .btn { grid-column: 1 / -1; justify-self: start; }
  .tl-related__head { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
  .tl-hero { padding: 24px 0 20px; }
  .tl-hero__lead { font-size: 1rem; }
  .tl-trust { gap: 4px 14px; font-size: .8125rem; }
  .tl-app { padding-bottom: 40px; }
  .tl-tool__form, .tl-tool__result { padding: 20px 16px; }
  .tl-row, .tl-row--3 { grid-template-columns: minmax(0, 1fr); }
  .tl-phone__row { grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); }
  .tl-item { grid-template-columns: minmax(0, 1fr) 64px 40px; grid-template-areas: "n q x" "p p p"; row-gap: 6px; padding-bottom: 10px; border-bottom: 1px dashed var(--line); }
  .tl-item > :nth-child(1) { grid-area: n; }
  .tl-item > :nth-child(2) { grid-area: q; }
  .tl-item > :nth-child(3) { grid-area: p; }
  .tl-item > :nth-child(4) { grid-area: x; }
  .tl-item .tl-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .tl-item:not(:first-child) > :not(:nth-child(3)) .tl-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  /* A 320 px «Enviar pedido por WhatsApp» no cabe en una línea: puede partirse, y el botón crece en vez de recortarse. */
  .tl-actions .btn { flex-basis: 100%; white-space: normal; height: auto; min-height: 44px; padding-block: 10px; line-height: 1.25; text-align: center; }
  .tl-grid { grid-template-columns: minmax(0, 1fr); }
  .tl-next { padding: 18px; gap: 12px; }
  .tl-next__actions .btn { flex: 1 1 100%; }
  .tl-prod__grid { grid-template-columns: 72px minmax(0, 1fr); }
  .tl-prod__img { width: 72px; height: 72px; }
  .tl-prod__fields { grid-template-columns: minmax(0, 1fr); }
  .tl-catalog__list { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 8px 12px 16px; gap: 8px; }
  .tl-doc { padding: 18px 14px; }
  .tl-doc__meta { grid-template-columns: minmax(0, 1fr); }
  .tlv-card { padding: 18px 16px; border-radius: 14px; }
}

/* ---------- Imprimir / guardar como PDF (tools.js → ZV.print) ---------- */
@media print {
  @page { margin: 14mm; }
  body.tl-printing > :not(.tl-print-sheet) { display: none; }
  .tl-print-sheet [hidden] { display: none; } /* la hoja se clona fuera de [data-tool-root] */
  body.tl-printing::before { display: none; }
  body.tl-printing { background: #fff; }
  .tl-print-sheet .tl-doc, .tl-print-sheet .tl-catalog { border: 0; box-shadow: none; border-radius: 0; padding: 0; max-height: none; overflow: visible; }
  .tl-print-sheet .tl-catalog__head { background: #fff; color: var(--ink); border-bottom: 2px solid var(--ink); padding: 0 0 12px; }
  .tl-print-sheet .tl-catalog__head span { color: var(--ink-3); }
  .tl-print-sheet .tl-catalog__list { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 8px 0 16px; }
  .tl-print-sheet .tl-catalog__cat { padding: 14px 0 4px; }
  .tl-print-sheet .tl-pc { break-inside: avoid; }
  .tl-print-sheet .tl-pc__cta { border: 1px solid var(--ink); background: #fff; color: var(--ink); }
  .tl-print-sheet * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

@media (prefers-reduced-motion: reduce) {
  .tl-next.is-in { animation: none; }
  .tl-card, .tl-door, .tl-toast, .tl-card__go .icon { transition: none; }
}

/* Contraste AA del chat de ejemplo (.wa de site.css) en las páginas de herramientas:
   la hora sobre la burbuja verde quedaba en 4,2:1 y «en línea» en 4,0:1. */
.tl .wa__t, .tlv .wa__t { color: #54656f; }
.tl .wa__who span, .tlv .wa__who span { opacity: 1; }

/* ==========================================================================
   Ventas: cifras, medidor, explicación, selector de modo, archivo, tabla, gráficos
   Reglas de datos (skill dataviz): una serie = un color (violeta de marca); «énfasis» = marca + gris
   #948da5 (validado: ΔE 28 normal / 23 CVD, ≥3:1 sobre blanco); barras ≤24 px con punta redondeada de
   4 px y base recta; rejilla en línea fina sólida; el texto nunca va del color de la serie; cada gráfico
   trae su tabla. Cifras grandes con números proporcionales; tabular-nums solo en columnas.
   ========================================================================== */
.tl-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tl-stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tl-stat { min-width: 0; padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); }
.tl-stat__l { display: block; font-size: .8125rem; line-height: 1.3; color: var(--ink-3); }
.tl-stat__v { display: block; margin-top: 4px; font-family: var(--f-body); font-weight: 650; font-size: 1.45rem; line-height: 1.15; letter-spacing: -.01em; color: var(--ink); overflow-wrap: anywhere; }
.tl-stat__s { display: block; margin-top: 4px; font-size: .8125rem; color: var(--ink-2); }
.tl-stat--hero { grid-column: 1 / -1; padding: 18px 20px; }
.tl-stat--hero .tl-stat__v { font-size: clamp(2.4rem, 1.8rem + 2.4vw, 3.1rem); font-weight: 700; letter-spacing: -.02em; }
.tl-stat--accent { border-color: var(--brand-line); background: var(--brand-tint); }
.tl-stat--accent .tl-stat__l { color: var(--ink-2); } /* --ink-3 sobre --brand-tint queda en 4,4:1 */
.tl-delta { display: inline-flex; align-items: center; gap: 4px; font-size: .8125rem; font-weight: 600; }
.tl-delta::before { font-size: .7em; }
.tl-delta.is-up { color: var(--ok); } .tl-delta.is-up::before { content: "▲"; }
.tl-delta.is-down { color: var(--bad); } .tl-delta.is-down::before { content: "▼"; }
.tl-delta.is-flat { color: var(--ink-3); } .tl-delta.is-flat::before { content: "●"; }
.tl-meter { position: relative; height: 10px; margin-top: 10px; border-radius: 999px; background: var(--brand-tint); overflow: hidden; }
.tl-meter > span { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--brand); }
.tl-meter--warn > span { background: var(--warn); }
.tl-explain { margin-top: 14px; padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: 0 var(--r) var(--r) 0; font-size: .9rem; color: var(--ink-2); }
.tl-explain p + p { margin-top: 6px; }
.tl-explain strong { color: var(--ink); }
.tl-formula { display: block; margin: 6px 0; padding: 8px 10px; border-radius: 8px; background: var(--bg-alt); font: 500 .85rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--ink); overflow-x: auto; white-space: nowrap; }
.tl-warn { margin-top: 12px; padding: 10px 12px; border-radius: var(--r); background: var(--warn-bg); color: var(--warn); font-size: .875rem; }
.tl-warn[hidden] { display: none; }

/* Selector de modo (radios con aspecto de pestañas) */
.tl-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-alt); }
.tl-seg label { position: relative; display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 9px; font-size: .875rem; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.tl-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tl-seg label:has(input:checked) { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(20, 17, 28, .12); }
.tl-seg label:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 1px; }

/* Archivo (analizador): arrastrar y soltar o elegir; el archivo nunca sale del navegador */
.tl-drop { position: relative; display: grid; place-items: center; gap: 6px; padding: 26px 18px; border: 2px dashed var(--line-strong); border-radius: var(--r-lg); background: #fff; text-align: center; color: var(--ink-2); cursor: pointer; transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease); }
.tl-drop:hover, .tl-drop.is-over { border-color: var(--brand); background: var(--brand-tint); }
.tl-drop:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }
.tl-drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.tl-drop strong { color: var(--ink); }
.tl-drop .icon { width: 28px; height: 28px; color: var(--brand); }

/* Tabla de datos (resultados y tabla de cada gráfico) */
.tl-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tl-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.tl-table th { padding: 8px 8px; text-align: left; font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
.tl-table td { padding: 8px 8px; border-bottom: 1px solid var(--line); color: var(--ink-2); vertical-align: top; overflow-wrap: anywhere; }
.tl-table td:first-child { color: var(--ink); }
.tl-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tl-table th.num { white-space: normal; }

/* Hallazgos */
.tl-insights { display: grid; gap: 10px; }
.tl-insight { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); }
.tl-insight > .icon { width: 20px; height: 20px; margin-top: 2px; color: var(--brand); }
.tl-insight__t { font-weight: 600; color: var(--ink); }
.tl-insight p { font-size: .9rem; color: var(--ink-2); }

/* Gráficos (landing/assets/tools/charts.js) */
.tl-chart { position: relative; padding: 16px 16px 12px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); }
.tl-chart__t { font-weight: 600; font-size: .95rem; color: var(--ink); }
.tl-chart__s { margin-top: 2px; font-size: .8125rem; color: var(--ink-3); }
.tl-chart__plot { margin-top: 10px; }
.tl-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.tl-chart .ax { font: 500 11px var(--f-body); fill: var(--ink-3); }
.tl-chart .lbl { font: 600 11px var(--f-body); fill: var(--ink); }
.tl-chart .grid { stroke: var(--line); stroke-width: 1; shape-rendering: crispEdges; }
.tl-chart .base { stroke: var(--line-strong); stroke-width: 1; shape-rendering: crispEdges; }
.tl-chart .bar { fill: #948da5; transition: opacity var(--d-fast) var(--ease); }
.tl-chart .bar.is-em, .tl-chart--one .bar { fill: var(--brand); }
.tl-chart .hit { fill: transparent; cursor: default; outline: none; }
.tl-chart g.is-on .bar { opacity: .78; }
.tl-chart g:focus-visible .hit { stroke: var(--brand); stroke-width: 2; }
.tl-chart__tip { position: absolute; z-index: 5; pointer-events: none; min-width: 120px; padding: 8px 10px; border-radius: 8px; background: var(--ink); color: #fff; font-size: .8125rem; line-height: 1.35; box-shadow: var(--shadow); transform: translate(-50%, calc(-100% - 10px)); }
.tl-chart__tip strong { display: block; font-size: .95rem; }
.tl-chart__tip span { color: #cfc9dc; }
.tl-chart__tip[hidden] { display: none; }
.tl-chart__table { margin-top: 8px; }
.tl-chart__table summary { cursor: pointer; font-size: .8125rem; font-weight: 600; color: var(--brand-ink); list-style: none; }
.tl-chart__table summary::-webkit-details-marker { display: none; }
.tl-chart__table summary::before { content: "+ "; }
.tl-chart__table[open] summary::before { content: "− "; }
.tl-chart__table .tl-table-wrap { margin-top: 8px; max-height: 260px; overflow-y: auto; }

@media (max-width: 640px) {
  .tl-stats--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tl-stat__v { font-size: 1.25rem; }
  .tl-chart { padding: 14px 12px 10px; }
}
@media print {
  .tl-print-sheet .tl-chart__table { display: none; }
  .tl-print-sheet .tl-stat, .tl-print-sheet .tl-chart, .tl-print-sheet .tl-insight { break-inside: avoid; }
}
/* Ranking horizontal (ZV.chart.bars): nombre · barra · valor en la punta */
.tl-hbars { display: grid; gap: 8px; }
.tl-hbars li { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: .85rem; }
.tl-hbars__l { min-width: 0; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-hbars__l small { display: block; color: var(--ink-3); font-size: .75rem; overflow: hidden; text-overflow: ellipsis; }
.tl-hbars__track { position: relative; height: 14px; }
.tl-hbars__bar { position: absolute; left: 0; top: 0; bottom: 0; max-width: 100%; border-radius: 0 4px 4px 0; background: var(--brand); }
.tl-hbars__v { font-weight: 600; color: var(--ink); white-space: nowrap; }
@media (max-width: 640px) {
  .tl-hbars li { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
  .tl-hbars__track { grid-column: 1 / -1; grid-row: 2; height: 10px; }
}