/* ============================================================
   mm-tools.css — piezas compartidas de las herramientas gratis
   (cotizador, ROAS, UTM, vista previa, schema, llms.txt).
   Prefijo tl-. Se carga después de styles.css y mm-pages.css.
   Objetivos táctiles de 44 px mínimo; las salidas anchas
   (código, tablas, vistas previas) se desplazan dentro de su caja.
   ============================================================ */
:root { --tl-ok: #5ed29c; --tl-warn: #f5b84b; --tl-bad: #ff7a8a; --tl-acc: #f036e1; --tl-code-bg: #0e0b12; }
html[data-theme="light"] { --tl-ok: #17804f; --tl-warn: #94600a; --tl-bad: #c3263b; --tl-acc: #b01aa3; --tl-code-bg: #1a1420; }

.pg-tool .container { min-width: 0; }
.pg-tool [hidden] { display: none !important; }
.tl-app { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.tl-app.out-wide { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
.tl-app.in-wide { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.tl-app > * { min-width: 0; }
@media (max-width: 1040px) { .tl-app, .tl-app.out-wide, .tl-app.in-wide { grid-template-columns: 1fr; } }

.tl-panel { padding: 28px; border-radius: 26px; min-width: 0; }
@media (max-width: 560px) { .tl-panel { padding: 20px 18px; border-radius: 22px; } }
.tl-out { position: sticky; top: 100px; }
@media (max-width: 1040px) { .tl-out { position: relative; top: auto; } }

.tl-h { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--paper-faint); margin: 0 0 16px; display: flex; align-items: center; gap: 10px; font-weight: 500; }
.tl-h .n { font-family: 'JetBrains Mono', monospace; color: var(--tl-acc); letter-spacing: .06em; }
.tl-title { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; margin: 0 0 6px; line-height: 1.25; }
.tl-sub { font-size: 14px; color: var(--paper-dim); margin: 0 0 20px; line-height: 1.55; }
.tl-group + .tl-group, .tl-panel > * + .tl-group { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line); }
.tl-stack { display: grid; gap: 16px; }
.tl-note { font-size: 12.5px; color: var(--paper-faint); line-height: 1.55; margin: 0; }
.tl-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.tl-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tl-mono { font-family: 'JetBrains Mono', monospace; }
.pg-tool .pg-input { min-height: 48px; }
.pg-tool textarea.pg-input { font-size: 14px; }
.pg-tool .pg-field > label { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pg-tool .pg-field > label small { font-weight: 400; font-size: 12px; color: var(--paper-faint); }
.tl-field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tl-field-row.r3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) { .tl-field-row, .tl-field-row.r3 { grid-template-columns: 1fr; } }
@media (min-width: 641px) and (max-width: 1040px) { .tl-field-row.r3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Entrada con prefijo / sufijo */
.tl-affix { position: relative; }
.tl-affix > span { position: absolute; top: 50%; transform: translateY(-50%); color: var(--paper-faint); font-size: 14px; pointer-events: none; font-family: 'JetBrains Mono', monospace; }
.tl-affix > .pre { left: 16px; }
.tl-affix > .suf { right: 16px; }
.tl-affix.has-pre .pg-input { padding-left: 34px; }
.tl-affix.has-pre.wide-pre .pg-input { padding-left: 52px; }
.tl-affix.has-suf .pg-input { padding-right: 40px; }

/* Botones compactos (44 px de alto para dedo) */
.tl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-size: 13.5px; font-weight: 500; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 0; cursor: pointer;
  color: var(--paper); background: var(--glass-bg-strong); box-shadow: inset 0 0 0 1px var(--line-strong); text-decoration: none; transition: background .2s, transform .2s cubic-bezier(.16,1,.3,1), color .2s; white-space: nowrap; }
.tl-btn:hover { background: rgba(var(--glass-tint), .1); }
.tl-btn:active { transform: scale(.97); }
.tl-btn.primary { background: linear-gradient(110deg, #f036e1, #9149ff); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
.tl-btn.primary:hover { filter: brightness(1.08); }
.tl-btn.wa { background: #1f9d55; color: #fff; box-shadow: none; }
.tl-btn.wa:hover { background: #1a8a4a; }
.tl-btn.danger:hover { color: var(--tl-bad); }
.tl-btn.icon { width: 44px; padding: 0; }
.tl-btn.ghost { background: transparent; box-shadow: none; color: var(--paper-dim); }
.tl-btn.ghost:hover { color: var(--paper); background: var(--glass-bg-strong); }
.tl-btn[disabled] { opacity: .45; pointer-events: none; }
.tl-btn svg { flex-shrink: 0; }
.tl-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Control segmentado */
.tl-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 26px; background: var(--glass-bg-strong); box-shadow: inset 0 0 0 1px var(--line); max-width: 100%; }
.tl-seg button { font: inherit; font-size: 13.5px; font-weight: 500; min-height: 40px; padding: 0 14px; white-space: nowrap; border-radius: 999px; border: 0; background: transparent; color: var(--paper-dim); cursor: pointer; transition: background .25s, color .25s; }
.tl-seg button:hover { color: var(--paper); }
.tl-seg button[aria-pressed="true"] { background: var(--paper); color: var(--ink); }
.tl-seg.full { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: 100%; }
.tl-seg.full button { padding: 0 8px; }

/* Pestañas */
.tl-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: -6px 0 24px; overflow-x: auto; scrollbar-width: none; }
.tl-tabs::-webkit-scrollbar { display: none; }
.tl-tabs button { font: inherit; font-size: 14px; font-weight: 500; min-height: 48px; padding: 0 16px; border: 0; background: none; color: var(--paper-dim); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; display: inline-flex; gap: 8px; align-items: center; transition: color .2s, border-color .2s; }
.tl-tabs button:hover { color: var(--paper); }
.tl-tabs button[aria-selected="true"] { color: var(--paper); border-bottom-color: #f036e1; }
.tl-tabs .cnt { font-family: 'JetBrains Mono', monospace; font-size: 11px; padding: 2px 7px; border-radius: 99px; background: var(--glass-bg-strong); box-shadow: inset 0 0 0 1px var(--line); }

/* Tarjetas de opción (radio/checkbox) */
.tl-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 10px; }
.tl-opts.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) { .tl-opts.c2 { grid-template-columns: 1fr; } }
.tl-opt { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; min-height: 56px; border-radius: 16px; cursor: pointer;
  background: var(--glass-bg); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .2s, background .2s, transform .2s cubic-bezier(.16,1,.3,1); }
.tl-opt input { position: absolute; inset: 0; opacity: 0; pointer-events: none; width: 100%; height: 100%; margin: 0; }
.tl-opt:hover { box-shadow: inset 0 0 0 1px var(--line-strong); }
.tl-opt:active { transform: scale(.985); }
.tl-opt:has(input:checked) { background: linear-gradient(135deg, rgba(240,54,225,.09), rgba(145,73,255,.09)); box-shadow: inset 0 0 0 1.5px #f036e1; }
.tl-opt:has(input:focus-visible) { outline: 2px solid #f036e1; outline-offset: 2px; }
.tl-opt:has(input:disabled) { opacity: .55; cursor: default; }
.tl-opt .ic { color: var(--paper-dim); flex-shrink: 0; margin-top: 1px; }
.tl-opt:has(input:checked) .ic { color: var(--tl-acc); }
.tl-opt .txt { min-width: 0; flex: 1; }
.tl-opt b { display: block; font-size: 14.5px; font-weight: 600; color: var(--paper); line-height: 1.3; }
.tl-opt small { display: block; font-size: 12.5px; color: var(--paper-dim); margin-top: 4px; line-height: 1.45; }
.tl-opt .tick { width: 20px; height: 20px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px var(--line-strong); display: grid; place-items: center; flex-shrink: 0; color: transparent; transition: background .2s; }
.tl-opt input[type="radio"] ~ .tick { border-radius: 50%; }
.tl-opt:has(input:checked) .tick { background: linear-gradient(135deg, #f036e1, #9149ff); box-shadow: none; color: #fff; }

/* KPIs con divisores (sin tarjetas) */
.tl-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); margin: 0; }
.tl-kpis > div { padding: 15px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.tl-kpis > div:nth-child(odd) { padding-right: 16px; }
.tl-kpis > div:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--line); }
.tl-kpis dt { font-size: 12px; color: var(--paper-faint); line-height: 1.35; }
.tl-kpis dd { margin: 6px 0 0; font-family: 'JetBrains Mono', monospace; font-size: clamp(17px, 1.6vw, 21px); letter-spacing: -0.02em; color: var(--paper); overflow-wrap: anywhere; }
.tl-kpis dd small { font-size: 11.5px; color: var(--paper-faint); letter-spacing: 0; margin-left: 4px; }
.tl-big { font-size: clamp(34px, 4.2vw, 52px); font-weight: 500; letter-spacing: -0.04em; line-height: 1.02; margin: 0; overflow-wrap: anywhere; }
.tl-big-label { font-size: 12px; color: var(--paper-faint); letter-spacing: .1em; text-transform: uppercase; margin: 0 0 10px; }

/* Veredicto */
.tl-verdict { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 18px; background: var(--glass-bg-strong); box-shadow: inset 0 0 0 1px var(--line); }
.tl-verdict > svg { flex-shrink: 0; margin-top: 2px; }
.tl-verdict b { color: var(--paper); font-size: 15.5px; }
.tl-verdict p { margin: 4px 0 0; color: var(--paper-dim); font-size: 14px; line-height: 1.55; }
.tl-verdict.ok { background: rgba(94,210,156,.09); box-shadow: inset 0 0 0 1px rgba(94,210,156,.32); }
.tl-verdict.ok > svg { color: var(--tl-ok); }
.tl-verdict.warn { background: rgba(245,184,75,.09); box-shadow: inset 0 0 0 1px rgba(245,184,75,.35); }
.tl-verdict.warn > svg { color: var(--tl-warn); }
.tl-verdict.bad { background: rgba(255,122,138,.09); box-shadow: inset 0 0 0 1px rgba(255,122,138,.35); }
.tl-verdict.bad > svg { color: var(--tl-bad); }

/* Píldoras de estado */
.tl-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap; background: var(--glass-bg-strong); color: var(--paper-dim); box-shadow: inset 0 0 0 1px var(--line); }
.tl-pill.ok { color: var(--tl-ok); background: rgba(94,210,156,.1); box-shadow: inset 0 0 0 1px rgba(94,210,156,.28); }
.tl-pill.warn { color: var(--tl-warn); background: rgba(245,184,75,.1); box-shadow: inset 0 0 0 1px rgba(245,184,75,.3); }
.tl-pill.bad { color: var(--tl-bad); background: rgba(255,122,138,.1); box-shadow: inset 0 0 0 1px rgba(255,122,138,.3); }
.tl-pill.acc { color: var(--tl-acc); background: rgba(240,54,225,.08); box-shadow: inset 0 0 0 1px rgba(240,54,225,.28); }

/* Bloques de código: siempre oscuros, se desplazan dentro de su caja */
.tl-code { margin: 0; padding: 18px 20px; border-radius: 18px; background: var(--tl-code-bg); color: #ebe5ef; font-family: 'JetBrains Mono', monospace; font-size: 12.5px; line-height: 1.7;
  overflow: auto; max-height: 560px; white-space: pre; tab-size: 2; box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); -webkit-overflow-scrolling: touch; overscroll-behavior: contain; max-width: 100%; }
.tl-code.wrap { white-space: pre-wrap; overflow-wrap: anywhere; }
.tl-code .k { color: #f79bf0; } .tl-code .s { color: #9fe3bf; } .tl-code .n { color: #ffc983; } .tl-code .b { color: #c3a2ff; } .tl-code .p { color: #8d8396; } .tl-code .c { color: #8d8396; font-style: italic; } .tl-code .t { color: #8ec5ff; }
.tl-code-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }

/* Lista de recomendaciones */
.tl-tips { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.tl-tips li { display: flex; gap: 10px; font-size: 14px; color: var(--paper-dim); line-height: 1.5; }
.tl-tips li > svg { flex-shrink: 0; margin-top: 2px; }
.tl-tips li.ok > svg { color: var(--tl-ok); }
.tl-tips li.warn > svg { color: var(--tl-warn); }
.tl-tips li.bad > svg { color: var(--tl-bad); }
.tl-tips li b { color: var(--paper); font-weight: 600; }

/* Estado vacío */
.tl-empty { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 36px 20px; border-radius: 18px; box-shadow: inset 0 0 0 1px var(--line); background: repeating-linear-gradient(135deg, transparent 0 10px, rgba(var(--glass-tint), .018) 10px 20px); color: var(--paper-dim); font-size: 14px; line-height: 1.5; }
.tl-empty > svg { color: var(--paper-faint); }
.tl-empty b { color: var(--paper); font-size: 15px; }

/* Medidor */
.tl-meter { height: 6px; border-radius: 99px; background: var(--glass-bg-strong); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.tl-meter i { display: block; height: 100%; border-radius: inherit; background: var(--tl-ok); transform-origin: left; transition: transform .35s cubic-bezier(.16,1,.3,1), background .3s; }
.tl-meter.warn i { background: var(--tl-warn); } .tl-meter.bad i { background: var(--tl-bad); } .tl-meter.acc i { background: linear-gradient(90deg, #9149ff, #f036e1); }

/* Tablas que se desplazan dentro de su caja */
.tl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; max-width: 100%; border-radius: 18px; box-shadow: inset 0 0 0 1px var(--line); }
.tl-scroll .pg-table { min-width: 620px; font-size: 13.5px; }
.tl-scroll .pg-table th, .tl-scroll .pg-table td { padding: 12px 14px; vertical-align: middle; }
.tl-scroll .pg-table td.mono, .tl-scroll .pg-table .num { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; white-space: nowrap; color: var(--paper); }

.tl-in { animation: tlIn .45s cubic-bezier(.16,1,.3,1) both; }
@keyframes tlIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tl-in { animation: none; } .tl-meter i { transition: none; } }

/* Interruptor (checkbox con aspecto de switch) */
.tl-switch { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; font-size: 14px; color: var(--paper-dim); }
.tl-switch input { appearance: none; -webkit-appearance: none; width: 40px; height: 24px; border-radius: 99px; background: var(--glass-bg-strong); box-shadow: inset 0 0 0 1px var(--line-strong); position: relative; cursor: pointer; flex-shrink: 0; transition: background .25s; margin: 0; }
.tl-switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--paper-dim); transition: transform .25s cubic-bezier(.16,1,.3,1), background .25s; }
.tl-switch input:checked { background: linear-gradient(110deg, #f036e1, #9149ff); box-shadow: none; }
.tl-switch input:checked::after { transform: translateX(16px); background: #fff; }
.tl-switch input:focus-visible { outline: 2px solid #f036e1; outline-offset: 3px; }

@media print { .tl-actions, .tl-tabs { display: none !important; } }

/* Herramienta con secciones a todo lo ancho debajo: el panel sticky vive en su propia
   cuadrícula (.tl-app) para que al hacer scroll no se encime sobre las secciones de abajo. */
.tl-flow { display: grid; gap: 20px; min-width: 0; }
.tl-flow > * { min-width: 0; }