/* Horizontal presentation of the real FP controls, scoped to this demonstration. */
html, body.wfa-form-demo-document { width:100%; height:100%; margin:0; overflow:hidden; background:#fffdfc; }
.wfa-demo-camera { height:100%; overflow:hidden; }
#demo-root, #demo-root * { box-sizing:border-box; }
#demo-root.producto-ame { width:100%; height:100%; margin:0; padding:0; background:transparent; }
#demo-root [hidden] { display:none!important; }
#demo-root #formulario-presupuesto, #demo-root #cuadriptico-form { width:100%; height:100%; margin:0; padding:0; border:0; border-radius:0; box-shadow:none; background:transparent; }
#demo-root #triptico-controls { display:grid; grid-template-columns:.8fr 1.2fr; gap:0; width:100%; height:100%; margin:0; padding:0; border:0; min-width:0; }
#demo-root .form-header, #demo-root .form-footer, #demo-root #cart-status, #demo-root #cart-link, #demo-root #form-error { display:none; }
#demo-root .triptico-purchase-summary { margin:0; padding:12px 14px; min-width:0; border:0; border-right:1px solid #ded5d2; border-radius:0; box-shadow:none; background:#f4f1ef; }
#demo-root .triptico-quantity-title { margin:0 0 5px; font-size:12px; line-height:15px; }
#demo-root #quantity-dropdown { position:relative; }
#demo-root #selected-option { min-height:36px; margin:0; padding:8px 10px; border-radius:6px; }
#demo-root #selected-option .text-container { min-width:0; }
#demo-root #quantity-label { font-size:14px; line-height:18px; font-weight:700; }
#demo-root #quantity-price { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 5px; margin:10px 0 0; padding:0; text-align:left; line-height:1.2; }
#demo-root #quantity-price strong { font-size:25px; font-weight:700; color:var(--triptico-brand); white-space:nowrap; }
#demo-root #quantity-price small { font-size:11px; font-weight:400; color:var(--triptico-muted); }
#demo-root .triptico-purchase-summary #quote-box { min-height:0; margin:10px 0 0; padding:8px 0 0; }
#demo-root #quote-values p { display:block; margin:0; }
#demo-root #quote-values p > span { display:block; font-size:11px; line-height:14px; }
#demo-root #quote-total { display:block; margin:2px 0 0; font-size:20px; font-weight:700; line-height:23px; color:var(--triptico-ink); white-space:nowrap; }
#demo-root #quote-values > span { font-size:10px; line-height:13px; margin-top:5px; }
/* The menu opens in place with the three options around the example quantity. */
#demo-root #formulario-presupuesto #quantity-dropdown > .dropdown-options { position:absolute; top:calc(100% + 4px); left:0; width:100%; max-height:none; overflow:visible; margin:0; padding:2px 0; border-radius:6px; box-shadow:0 4px 12px #36232a18; }
#demo-root #quantity-dropdown .manual-input-container, #demo-root #quantity-error, #demo-root #quantity-dropdown .triptico-note, #demo-root .quantity-remove { display:none; }
#demo-root #cantidad-list { max-height:none; overflow:visible; margin:0; padding:0; }
#demo-root #cantidad-list li { margin:0; padding:0; border:0; }
#demo-root #cantidad-list li:nth-child(n+4) { display:none; }
#demo-root #cantidad-list .quantity-pick { display:block; width:100%; margin:0; padding:2px 8px; font-size:12px; font-weight:600; line-height:14px; border-radius:0; }
#demo-root #cantidad-list .triptico-quantity-price { margin-top:1px; font-size:10px; line-height:12px; }
#demo-root .triptico-config-card { display:flex; flex-direction:column; min-width:0; height:100%; margin:0; padding:9px 12px; border:0; border-radius:0; box-shadow:none; background:#fffdfc; }
#demo-root .triptico-config-heading { display:none; }
#demo-root .triptico-config-workspace { flex:1; height:auto; min-height:0; }
#demo-root #triptico-config-editor { padding:0; }
#demo-root .triptico-config-tabs { margin:0; padding:3px; gap:2px; }
#demo-root #formulario-presupuesto .triptico-config-tabs button { min-height:42px; padding:3px 0; gap:3px; font-size:9px; line-height:12px; }
#demo-root .triptico-config-tabs svg { width:16px; height:16px; }
#demo-root .triptico-config-panels { padding:10px 0 0; overflow:hidden; }
#demo-root .triptico-config-intro { margin:0 0 10px; font-size:11px; line-height:15px; }
#demo-root .triptico-fold-segments { grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }
#demo-root .triptico-config-panels .triptico-fold-segments label { min-height:40px; padding:5px 3px; gap:3px; border-radius:7px; font-size:10px; line-height:13px; }
#demo-root .triptico-config-panels input[type=radio] { flex:none; width:12px; height:12px; margin:0; }
#demo-root .triptico-config-panels .triptico-note { margin:10px 0 0; font-size:10px; line-height:14px; }
#demo-root #transition:empty { display:none; }
#demo-root .triptico-config-panels .triptico-two-cols { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
#demo-root .triptico-config-panels fieldset { min-width:0; padding:0; border:0; }
#demo-root .triptico-config-panels .triptico-two-cols legend { margin:0 0 6px; padding:0; font-size:11px; line-height:14px; }
#demo-root .triptico-config-panels .triptico-choice { align-items:center; min-height:30px; padding:5px; margin:0 0 5px; gap:4px; font-size:10px; line-height:13px; white-space:nowrap; }
.wfa-demo-cursor { position:absolute; z-index:100; top:0; left:0; width:18px; height:23px; opacity:0; pointer-events:none; filter:drop-shadow(0 2px 2px #0002); transform:translate(var(--cursor-x,80px),var(--cursor-y,40px)); transition:transform .55s ease, opacity .2s ease; }
body[data-ready="true"] .wfa-demo-cursor { opacity:1; }
body[data-paused="true"] .wfa-demo-cursor { opacity:0; }
@media (max-width:480px) {
  #demo-root .triptico-config-icon, #demo-root .triptico-config-arrow { display:none; }
  #demo-root .triptico-purchase-summary { padding:10px; }
  #demo-root .triptico-config-card { padding:9px 10px; }
  #demo-root #quantity-price strong { font-size:22px; }
}
@media (max-width:340px) {
  #demo-root #triptico-controls { grid-template-columns:1fr; grid-template-rows:56px minmax(0,1fr); }
  #demo-root .triptico-purchase-summary { display:grid; grid-template-columns:94px minmax(0,1fr); column-gap:8px; align-content:center; padding:5px 8px; border-right:0; border-bottom:1px solid #ded5d2; }
  #demo-root #quantity-dropdown { grid-row:1/3; align-self:center; }
  #demo-root #selected-option { padding:7px 4px; gap:3px; }
  #demo-root #quantity-label { font-size:11px; line-height:14px; }
  #demo-root .triptico-quantity-title { display:none; }
  #demo-root #quantity-price { margin:0; gap:2px 4px; }
  #demo-root #quantity-price strong { font-size:15px; }
  #demo-root #quantity-price small { font-size:9px; }
  #demo-root .triptico-purchase-summary #quote-box { grid-column:2; margin:0; padding:0; border:0; }
  #demo-root #quote-values p { display:flex; align-items:baseline; gap:4px; }
  #demo-root #quote-values p > span { font-size:9px; line-height:12px; }
  #demo-root #quote-total { margin:0; font-size:12px; line-height:14px; }
  #demo-root #quote-values > span { margin:0; font-size:8px; line-height:10px; }
  #demo-root #cantidad-list .quantity-pick { font-size:11px; }
  #demo-root .triptico-config-card { padding:4px 8px; }
  #demo-root #formulario-presupuesto .triptico-config-tabs button { min-height:30px; padding:1px 0; gap:1px; font-size:8px; line-height:10px; }
  #demo-root .triptico-config-tabs svg { width:13px; height:13px; }
  #demo-root .triptico-config-panels { padding-top:5px; }
  #demo-root .triptico-config-intro { margin-bottom:5px; font-size:10px; line-height:12px; }
  #demo-root .triptico-config-panels .triptico-fold-segments label { min-height:30px; padding:3px; font-size:9px; line-height:11px; }
  #demo-root .triptico-config-panels .triptico-note { margin-top:5px; font-size:9px; line-height:11px; }
  #demo-root .triptico-config-panels .triptico-two-cols legend { margin-bottom:3px; font-size:10px; line-height:12px; }
  #demo-root .triptico-config-panels .triptico-choice { min-height:20px; padding:2px 5px; margin-bottom:3px; font-size:9px; line-height:12px; }
}
@media (prefers-reduced-motion:reduce) { .wfa-demo-cursor { transition:none; } }