/* Módulos genéricos (ventas y formularios). Cada valor llega como variable desde el panel;
   los valores de respaldo solo existen para el primer pintado. */
.tbm, .tbm *, .tbm *::before, .tbm *::after,
.tbm-page, .tbm-page *, .tbm-page *::before, .tbm-page *::after { box-sizing: border-box; }
.tbm .ln-es { display: none; }
html[lang="es"] .tbm .ln-en { display: none; }
html[lang="es"] .tbm .ln-es { display: inline; }

.tbm-zone {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: var(--tbm-zone-justify, center);
  gap: var(--tbm-zone-gap, 12px);
  margin: var(--tbm-zone-margin, 20px 0 0);
}
.tbm-zone:empty { display: none; }
.tbm-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  flex: 0 1 var(--tbm-width, auto);
  max-width: 100%;
}
.tbm-btn {
  appearance: none;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: var(--tbm-pad-y, 16px) var(--tbm-pad-x, 36px);
  border: var(--tbm-border-w, 1px) solid var(--tbm-border, transparent);
  border-radius: var(--tbm-radius, 999px);
  background: var(--tbm-bg, var(--blood, #b1182a));
  color: var(--tbm-ink, var(--bone, #fff6ee));
  font-family: var(--tbm-font, inherit);
  font-size: var(--tbm-size, 12px);
  font-weight: var(--tbm-weight, 500);
  letter-spacing: var(--tbm-track, 0.3em);
  line-height: 1.2;
  text-transform: var(--tbm-case, uppercase);
  text-decoration: none;
  text-align: center;
  box-shadow: var(--tbm-shadow, none);
  cursor: pointer;
  transition-property: transform, filter, background-color, color, box-shadow, border-color;
  transition-duration: var(--tbm-speed, 200ms);
  transition-timing-function: ease;
}
.tbm-btn:hover, .tbm-btn:focus-visible {
  background: var(--tbm-bg-hover, var(--tbm-bg, var(--blood, #b1182a)));
  color: var(--tbm-ink-hover, var(--tbm-ink, var(--bone, #fff6ee)));
  transform: var(--tbm-hover-transform, translateY(-1px));
  filter: var(--tbm-hover-filter, none);
  box-shadow: var(--tbm-hover-shadow, var(--tbm-shadow, none));
}
.tbm-btn:focus-visible { outline: 2px solid var(--tbm-ink, currentColor); outline-offset: 3px; }
.tbm-btn[disabled], .tbm-btn.is-busy { opacity: .6; cursor: default; transform: none; }
.tbm-btn-main { display: block; }
.tbm-btn-sub {
  display: block;
  font-size: .82em;
  letter-spacing: .06em;
  text-transform: none;
  opacity: .88;
}
.tbm-qty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  color: inherit;
}
.tbm-qty input {
  width: 72px;
  min-height: 36px;
  padding: 4px 8px;
  border: 1px solid var(--tbm-border, rgba(127, 127, 127, .5));
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: center;
}
.tbm-msg { margin: 0; font-size: 13px; line-height: 1.4; text-align: center; }
.tbm-msg:empty { display: none; }
.tbm-msg.is-err { color: var(--tbf-error, #e25c5c); }

.tbm-form {
  width: 100%;
  max-width: var(--tbf-max, 640px);
  margin: 0 auto;
  padding: var(--tbf-pad, 0);
  border-radius: var(--tbf-radius, 0);
  background: var(--tbf-bg, transparent);
  color: var(--tbf-ink, inherit);
  font-family: var(--tbf-font, inherit);
  font-size: var(--tbf-size, 16px);
  line-height: 1.5;
  text-align: var(--tbf-align, left);
}
.tbm-zone-form { flex: 1 1 100%; }
.tbm-form-title { margin: 0 0 8px; font-size: var(--tbf-title-size, 28px); font-weight: 500; line-height: 1.2; color: inherit; }
.tbm-form-intro, .tbm-step-text { margin: 0 0 16px; color: var(--tbf-muted, inherit); opacity: .9; }
.tbm-step-title { margin: 0 0 6px; font-size: 1.15em; font-weight: 600; color: inherit; }
.tbm-progress { margin: 0 0 18px; }
.tbm-progress-bar {
  height: 4px;
  border-radius: 99px;
  background: var(--tbf-field-border, rgba(127, 127, 127, .3));
  overflow: hidden;
}
.tbm-progress-bar span {
  display: block;
  height: 100%;
  width: var(--tbf-progress, 0%);
  background: var(--tbf-accent, var(--blood, #b1182a));
  transition: width .3s ease;
}
.tbm-progress-text { margin: 6px 0 0; font-size: .8em; letter-spacing: .08em; text-transform: uppercase; color: var(--tbf-muted, inherit); }
.tbm-fields {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--tbf-gap, 14px);
  margin: 0 0 18px;
  text-align: left;
}
.tbm-field { grid-column: span 6; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tbm-w-half { grid-column: span 3; }
.tbm-w-third { grid-column: span 2; }
@media (max-width: 640px) {
  .tbm-w-half, .tbm-w-third { grid-column: span 6; }
}
.tbm-label { font-size: .92em; font-weight: 600; color: inherit; }
.tbm-req { color: var(--tbf-accent, var(--blood, #b1182a)); margin-left: 2px; }
.tbm-help { margin: 0; font-size: .82em; color: var(--tbf-muted, inherit); opacity: .85; }
.tbm-note { margin: 0; color: inherit; white-space: pre-line; }
.tbm-input {
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--tbf-field-border, rgba(127, 127, 127, .45));
  border-radius: var(--tbf-field-radius, 6px);
  background: var(--tbf-field-bg, #ffffff);
  color: var(--tbf-field-ink, #111111);
  font: inherit;
  font-size: 1em;
}
textarea.tbm-input { min-height: 120px; resize: vertical; }
.tbm-input:focus { outline: 2px solid var(--tbf-accent, var(--blood, #b1182a)); outline-offset: 1px; }
.tbm-field.has-error .tbm-input { border-color: var(--tbf-error, #e25c5c); }
.tbm-error { margin: 0; font-size: .82em; color: var(--tbf-error, #e25c5c); }
.tbm-choices { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; }
.tbm-choice { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: .96em; }
.tbm-choice input { width: 18px; height: 18px; margin: 3px 0 0; flex: 0 0 auto; accent-color: var(--tbf-accent, var(--blood, #b1182a)); }
.tbm-range { display: flex; align-items: center; gap: 12px; }
.tbm-range input { flex: 1 1 auto; accent-color: var(--tbf-accent, var(--blood, #b1182a)); }
.tbm-range output { min-width: 3ch; font-variant-numeric: tabular-nums; }
.tbm-rating { display: flex; gap: 6px; }
.tbm-star {
  appearance: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--tbf-field-border, rgba(127, 127, 127, .45));
  border-radius: 50%;
  background: transparent;
  color: var(--tbf-muted, inherit);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.tbm-star.is-on { background: var(--tbf-accent, var(--blood, #b1182a)); border-color: var(--tbf-accent, var(--blood, #b1182a)); color: var(--tbf-btn-ink, #ffffff); }
.tbm-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.tbm-captcha { margin: 0 0 16px; }
.tbm-captcha:empty { display: none; }
.tbm-nav { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-start; }
.tbm-form.is-center .tbm-nav, .tbm-form.is-center .tbm-done-sales { justify-content: center; }
.tbm-nav .tbm-btn {
  width: auto;
  background: var(--tbf-btn-bg, var(--tbf-accent, var(--blood, #b1182a)));
  color: var(--tbf-btn-ink, #ffffff);
  border-radius: var(--tbf-btn-radius, 999px);
  text-transform: var(--tbf-btn-case, uppercase);
  letter-spacing: .18em;
  padding: 14px 28px;
}
.tbm-nav .tbm-back {
  background: transparent;
  color: inherit;
  border-color: var(--tbf-field-border, rgba(127, 127, 127, .45));
}
.tbm-status { margin: 12px 0 0; font-size: .9em; }
.tbm-status:empty { display: none; }
.tbm-status.is-err { color: var(--tbf-error, #e25c5c); }
.tbm-done p { margin: 0 0 12px; white-space: pre-line; }
.tbm-done-sales { justify-content: flex-start; }
.tbm-preview-note { margin: 10px 0 0; font-size: 12px; opacity: .8; }

.tbm-page {
  margin: 0;
  min-height: 100vh;
  background: var(--tbp-bg, #12080a);
  color: var(--tbp-ink, #efe6d6);
  font-family: var(--tbp-font, Georgia, "Times New Roman", serif);
}
.tbm-page.tbm-pv.is-light { --tbp-bg: var(--bone, #ffffff); --tbp-ink: var(--ink, #111111); }
.tbm-page-main { width: 100%; max-width: var(--tbp-max, 760px); margin: 0 auto; padding: 48px 20px 64px; }
.tbm-page-logo { margin: 0 0 28px; text-align: center; }
.tbm-page-logo img { max-width: 220px; height: auto; }
.tbm-page-back { margin: 32px 0 0; text-align: center; }
.tbm-page-back a { color: var(--tbp-accent, currentColor); }
.tbm-page-empty { text-align: center; }
.tbm-result { text-align: center; }
.tbm-result-title { margin: 0 0 16px; font-weight: 500; font-size: 32px; line-height: 1.2; }
.tbm-result-text { margin: 0 0 12px; }
.tbm-result-facts { display: inline-grid; grid-template-columns: repeat(2, auto); gap: 8px 24px; margin: 20px 0 0; text-align: left; }
.tbm-result-facts div { display: contents; }
.tbm-result-facts dt { opacity: .7; }
.tbm-result-facts dd { margin: 0; font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
  .tbm-btn, .tbm-progress-bar span { transition: none; }
}
