{"id":48470,"date":"2026-05-28T09:33:58","date_gmt":"2026-05-28T09:33:58","guid":{"rendered":"https:\/\/www.cnshining.com\/?page_id=48470"},"modified":"2026-06-02T03:11:04","modified_gmt":"2026-06-02T03:11:04","slug":"calculadora-de-capacidad-de-latas-de-aerosol","status":"publish","type":"page","link":"https:\/\/www.cnshining.com\/es\/centro-de-herramientas-de-embalaje\/calculadora-de-capacidad-de-latas-de-aerosol","title":{"rendered":"Calculadora de capacidad de latas de aerosol"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"48470\" class=\"elementor elementor-48470\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1e4ac71a e-flex e-con-boxed e-con e-parent\" data-id=\"1e4ac71a\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fd2f5a7 elementor-icon-list--layout-inline elementor-align-center elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list\" data-id=\"fd2f5a7\" data-element_type=\"widget\" data-widget_type=\"icon-list.default\">\n\t\t\t\t\t\t\t<ul class=\"elementor-icon-list-items elementor-inline-items\">\n\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item elementor-inline-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/www.cnshining.com\/es\" target=\"_blank\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-home\" viewbox=\"0 0 576 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z\"><\/path><\/svg>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Hogar \/<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item elementor-inline-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/www.cnshining.com\/es\/centro-de-herramientas-de-embalaje\/\" target=\"_blank\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Centro de herramientas de embalaje<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t<\/ul>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2b4f7e93 e-flex e-con-boxed e-con e-parent\" data-id=\"2b4f7e93\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-c6722f3 e-con-full e-flex e-con e-child\" data-id=\"c6722f3\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-35015ca elementor-widget elementor-widget-html\" data-id=\"35015ca\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section id=\"acc-calculator\" class=\"sp-aerosol-can-calculator\" data-sp-aerosol-can-calculator>\r\n  <style>\r\n    #acc-calculator,\r\n    #acc-calculator * { box-sizing: border-box; }\r\n\r\n    #acc-calculator {\r\n      --sp-bg: #f5f7fb;\r\n      --sp-panel: #ffffff;\r\n      --sp-text: #152033;\r\n      --sp-muted: #5f708c;\r\n      --sp-line: #d8e2ef;\r\n      --sp-blue: #1363df;\r\n      --sp-blue-dark: #082a5e;\r\n      --sp-blue-soft: #edf4ff;\r\n      --sp-silver: #eef3fa;\r\n      --sp-red: #d62828;\r\n      --sp-shadow: 0 20px 48px rgba(8, 42, 94, .08);\r\n      --acc-value-size: 24px;\r\n      max-width: 1220px;\r\n      margin: 28px auto;\r\n      color: var(--sp-text);\r\n      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Arial, sans-serif;\r\n      line-height: 1.55;\r\n    }\r\n\r\n    #acc-calculator h1,\r\n    #acc-calculator h2,\r\n    #acc-calculator h3,\r\n    #acc-calculator p { margin: 0; }\r\n\r\n    #acc-calculator button,\r\n    #acc-calculator input,\r\n    #acc-calculator select {\r\n      font: inherit;\r\n    }\r\n\r\n    #acc-calculator .acc-panel,\r\n    #acc-calculator .acc-preview-panel {\r\n      -webkit-user-select: none;\r\n      user-select: none;\r\n    }\r\n\r\n    #acc-calculator .acc-native-input,\r\n    #acc-calculator .acc-native-select {\r\n      -webkit-user-select: auto;\r\n      user-select: auto;\r\n    }\r\n\r\n    #acc-calculator .acc-shell {\r\n      background: linear-gradient(180deg, #fbfcfe 0%, var(--sp-bg) 100%);\r\n      border: 1px solid var(--sp-line);\r\n      border-radius: 30px;\r\n      padding: clamp(24px, 5vw, 56px);\r\n      box-shadow: 0 12px 30px rgba(15, 36, 74, .04);\r\n      overflow: visible;\r\n    }\r\n\r\n    #acc-calculator .acc-badge {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      gap: 8px;\r\n      padding: 8px 14px;\r\n      margin-bottom: 18px;\r\n      border: 1px solid #bcd0f1;\r\n      border-radius: 999px;\r\n      background: #fff;\r\n      color: var(--sp-blue);\r\n      font-size: 13px;\r\n      font-weight: 800;\r\n      letter-spacing: .02em;\r\n      text-transform: uppercase;\r\n    }\r\n\r\n    #acc-calculator .acc-badge::before {\r\n      content: \"\";\r\n      width: 9px;\r\n      height: 9px;\r\n      border-radius: 50%;\r\n      background: var(--sp-blue);\r\n      box-shadow: 0 0 0 5px rgba(19, 99, 223, .12);\r\n      flex: 0 0 auto;\r\n    }\r\n\r\n    #acc-calculator .acc-hero h1 {\r\n      margin-bottom: 18px;\r\n      color: var(--sp-blue-dark);\r\n      font-size: clamp(30px, 4vw, 42px);\r\n      line-height: .98;\r\n      letter-spacing: -.05em;\r\n      max-width: 980px;\r\n    }\r\n\r\n    #acc-calculator .acc-hero p {\r\n      max-width: 980px;\r\n      color: var(--sp-muted);\r\n      font-size: clamp(16px, 2vw, 18px);\r\n      line-height: 1.75;\r\n    }\r\n\r\n    #acc-calculator .acc-feature-row {\r\n      display: grid;\r\n      grid-template-columns: repeat(3, minmax(0, 1fr));\r\n      gap: 14px;\r\n      margin-top: 28px;\r\n    }\r\n\r\n    #acc-calculator .acc-feature {\r\n      background: #fff;\r\n      border: 1px solid var(--sp-line);\r\n      border-radius: 18px;\r\n      padding: 16px;\r\n      min-height: 112px;\r\n    }\r\n\r\n    #acc-calculator .acc-feature strong {\r\n      display: block;\r\n      color: var(--sp-blue-dark);\r\n      font-size: 18px;\r\n      line-height: 1.25;\r\n      letter-spacing: -.02em;\r\n      margin-bottom: 8px;\r\n    }\r\n\r\n    #acc-calculator .acc-feature span {\r\n      display: block;\r\n      color: var(--sp-muted);\r\n      font-size: 13px;\r\n      line-height: 1.45;\r\n    }\r\n\r\n    #acc-calculator .acc-browser {\r\n      margin-top: 28px;\r\n      padding: 28px;\r\n      border-radius: 28px;\r\n      background: linear-gradient(135deg, #1a1b1f 0%, #0f1013 100%);\r\n      color: #fff;\r\n      box-shadow: 0 22px 48px rgba(0, 0, 0, .18);\r\n    }\r\n\r\n    #acc-calculator .acc-browser-kicker {\r\n      color: #ff4b39;\r\n      font-size: 14px;\r\n      font-weight: 800;\r\n      letter-spacing: .04em;\r\n      text-transform: uppercase;\r\n      margin-bottom: 8px;\r\n    }\r\n\r\n    #acc-calculator .acc-browser h2 {\r\n      font-size: clamp(28px, 4vw, 52px);\r\n      line-height: .98;\r\n      letter-spacing: -.05em;\r\n      margin-bottom: 18px;\r\n      color: #fff;\r\n    }\r\n\r\n    #acc-calculator .acc-browser-subtitle {\r\n      font-size: 15px;\r\n      line-height: 1.6;\r\n      color: rgba(255,255,255,.78);\r\n      margin-bottom: 18px;\r\n    }\r\n\r\n    #acc-calculator .acc-browser-grid {\r\n      display: grid;\r\n      grid-template-columns: repeat(5, minmax(0, 1fr));\r\n      gap: 18px;\r\n      margin-top: 18px;\r\n    }\r\n\r\n    #acc-calculator .acc-browser-field label {\r\n      display: block;\r\n      margin-bottom: 8px;\r\n      font-size: 13px;\r\n      font-weight: 700;\r\n      color: rgba(255,255,255,.92);\r\n    }\r\n\r\n    #acc-calculator .acc-browser-field select,\r\n    #acc-calculator .acc-native-select,\r\n    #acc-calculator .acc-native-input {\r\n      width: 100%;\r\n      border: 1px solid rgba(255,255,255,.18);\r\n      border-radius: 0;\r\n      background: transparent;\r\n      color: inherit;\r\n      min-height: 48px;\r\n      padding: 10px 14px;\r\n      outline: none;\r\n      box-shadow: none;\r\n    }\r\n\r\n    #acc-calculator .acc-browser-field select {\r\n      border-width: 0 0 1px 0;\r\n      color: #fff;\r\n      padding-left: 0;\r\n      padding-right: 24px;\r\n      font-size: 16px;\r\n      background-color: transparent;\r\n    }\r\n\r\n    #acc-calculator .acc-browser-field option,\r\n    #acc-calculator .acc-native-select option { color: #111827; }\r\n\r\n    #acc-calculator .acc-browser-table-wrap {\r\n      margin-top: 18px;\r\n      overflow-x: auto;\r\n      border-top: 1px solid rgba(255,255,255,.14);\r\n      padding-top: 16px;\r\n    }\r\n\r\n    #acc-calculator .acc-browser-table {\r\n      width: 100%;\r\n      border-collapse: collapse;\r\n      min-width: 820px;\r\n    }\r\n\r\n    #acc-calculator .acc-browser-table th,\r\n    #acc-calculator .acc-browser-table td {\r\n      padding: 10px 10px;\r\n      font-size: 14px;\r\n      text-align: left;\r\n      border-bottom: 1px solid rgba(255,255,255,.08);\r\n      white-space: nowrap;\r\n    }\r\n\r\n    #acc-calculator .acc-browser-table th {\r\n      color: rgba(255,255,255,.72);\r\n      font-size: 12px;\r\n      text-transform: uppercase;\r\n      letter-spacing: .04em;\r\n    }\r\n\r\n    #acc-calculator .acc-browser-table td:last-child,\r\n    #acc-calculator .acc-browser-table th:last-child { text-align: right; }\r\n\r\n    #acc-calculator .acc-browser-table .is-highlight td {\r\n      background: rgba(255,255,255,.08);\r\n    }\r\n\r\n    #acc-calculator .acc-browser-empty {\r\n      padding: 14px 0 6px;\r\n      color: rgba(255,255,255,.72);\r\n      font-size: 14px;\r\n    }\r\n\r\n    #acc-calculator .acc-workspace {\r\n      display: grid;\r\n      grid-template-columns: minmax(360px, 1.08fr) minmax(360px, .92fr);\r\n      gap: clamp(22px, 4vw, 36px);\r\n      align-items: start;\r\n      overflow: visible;\r\n      margin-top: 28px;\r\n    }\r\n\r\n    #acc-calculator .acc-preview-column {\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: 18px;\r\n    }\r\n\r\n    #acc-calculator .acc-panel,\r\n    #acc-calculator .acc-preview-panel {\r\n      position: relative;\r\n      background: var(--sp-panel);\r\n      border: 1px solid var(--sp-line);\r\n      border-radius: 24px;\r\n      box-shadow: var(--sp-shadow);\r\n    }\r\n\r\n    #acc-calculator .acc-panel,\r\n    #acc-calculator .acc-preview-panel {\r\n      padding: clamp(22px, 3vw, 30px);\r\n      overflow: visible;\r\n      z-index: 20;\r\n    }\r\n\r\n    #acc-calculator .acc-preview-panel {\r\n      min-height: 570px;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n    }\r\n\r\n    #acc-calculator .acc-panel::before,\r\n    #acc-calculator .acc-preview-panel::before {\r\n      content: \"\";\r\n      position: absolute;\r\n      left: 18px;\r\n      right: 18px;\r\n      top: 0;\r\n      height: 4px;\r\n      background: linear-gradient(90deg, var(--sp-blue), var(--sp-blue-dark));\r\n      border-radius: 999px;\r\n    }\r\n\r\n    #acc-calculator .acc-title-row {\r\n      display: flex;\r\n      align-items: flex-start;\r\n      justify-content: space-between;\r\n      gap: 18px;\r\n      margin-bottom: 20px;\r\n      padding-top: 4px;\r\n    }\r\n\r\n    #acc-calculator h3 {\r\n      color: var(--sp-blue-dark);\r\n      font-size: 22px;\r\n      line-height: 1.1;\r\n      letter-spacing: -.03em;\r\n    }\r\n\r\n    #acc-calculator .acc-title-row p {\r\n      margin-top: 8px;\r\n      color: var(--sp-muted);\r\n      font-size: 14px;\r\n    }\r\n\r\n    #acc-calculator .acc-input-grid {\r\n      display: grid;\r\n      grid-template-columns: 1fr;\r\n      gap: 14px;\r\n      overflow: visible;\r\n    }\r\n\r\n    #acc-calculator .acc-split-row {\r\n      display: grid;\r\n      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\r\n      gap: 14px;\r\n      align-items: start;\r\n    }\r\n\r\n    #acc-calculator .acc-field {\r\n      display: block;\r\n      position: relative;\r\n      border: 1px solid var(--sp-line);\r\n      border-radius: 18px;\r\n      background: #fff;\r\n      padding: 14px;\r\n      transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;\r\n      overflow: visible;\r\n    }\r\n\r\n    #acc-calculator .acc-field:focus-within {\r\n      border-color: rgba(19, 99, 223, .58);\r\n      box-shadow: 0 12px 28px rgba(19, 99, 223, .10);\r\n      transform: translateY(-1px);\r\n    }\r\n\r\n    #acc-calculator .acc-field > span {\r\n      display: block;\r\n      margin-bottom: 2px;\r\n      color: var(--sp-muted);\r\n      font-size: 12px;\r\n      font-weight: 850;\r\n      text-transform: uppercase;\r\n      letter-spacing: .055em;\r\n    }\r\n\r\n    #acc-calculator .acc-field small {\r\n      display: block;\r\n      margin-bottom: 8px;\r\n      color: #8ba0bb;\r\n      font-size: 12px;\r\n    }\r\n\r\n    #acc-calculator .acc-mouth-field[hidden] {\r\n      display: none !important;\r\n    }\r\n\r\n    #acc-calculator .acc-mouth-field .acc-native-select:disabled {\r\n      opacity: 1;\r\n    }\r\n\r\n    #acc-calculator .acc-height-range {\r\n      margin: 8px 0 10px;\r\n      color: var(--sp-blue);\r\n      font-size: 13px;\r\n      font-weight: 800;\r\n      line-height: 1.45;\r\n    }\r\n\r\n    #acc-calculator .acc-height-quick-row {\r\n      display: grid;\r\n      grid-template-columns: repeat(3, minmax(0, 1fr));\r\n      gap: 8px;\r\n      margin-top: 12px;\r\n    }\r\n\r\n    #acc-calculator .acc-height-quick,\r\n    #acc-calculator .acc-reset,\r\n    #acc-calculator .acc-copy,\r\n    #acc-calculator .acc-clear {\r\n      border: 1px solid var(--sp-line);\r\n      border-radius: 13px;\r\n      background: #fff;\r\n      color: var(--sp-blue-dark);\r\n      padding: 12px 14px;\r\n      font-size: 14px;\r\n      font-weight: 800;\r\n      cursor: pointer;\r\n      transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;\r\n      white-space: nowrap;\r\n    }\r\n\r\n    #acc-calculator .acc-height-quick:hover,\r\n    #acc-calculator .acc-reset:hover,\r\n    #acc-calculator .acc-copy:hover,\r\n    #acc-calculator .acc-clear:hover {\r\n      transform: translateY(-1px);\r\n      border-color: rgba(19, 99, 223, .4);\r\n      background: #f7fbff;\r\n      box-shadow: 0 10px 24px rgba(22, 32, 51, .05);\r\n    }\r\n\r\n    #acc-calculator .acc-copy {\r\n      border-color: transparent;\r\n      background: linear-gradient(135deg, var(--sp-blue), var(--sp-blue-dark));\r\n      color: #fff;\r\n      box-shadow: 0 12px 28px rgba(19, 99, 223, .18);\r\n    }\r\n\r\n\r\n    #acc-calculator .acc-copy:active,\r\n    #acc-calculator .acc-copy:focus,\r\n    #acc-calculator .acc-copy:focus-visible,\r\n    #acc-calculator .acc-copy.is-selected,\r\n    #acc-calculator .acc-copy.acc-is-selected,\r\n    #acc-calculator .acc-reset:active,\r\n    #acc-calculator .acc-reset:focus,\r\n    #acc-calculator .acc-reset:focus-visible,\r\n    #acc-calculator .acc-reset.is-selected,\r\n    #acc-calculator .acc-reset.acc-is-selected,\r\n    #acc-calculator .acc-clear:active,\r\n    #acc-calculator .acc-clear:focus,\r\n    #acc-calculator .acc-clear:focus-visible,\r\n    #acc-calculator .acc-clear.is-selected,\r\n    #acc-calculator .acc-clear.acc-is-selected,\r\n    #acc-calculator .acc-action-row button.is-selected,\r\n    #acc-calculator .acc-action-row button.acc-is-selected,\r\n    #acc-calculator .acc-action-row button:active,\r\n    #acc-calculator .acc-action-row button:focus-visible {\r\n      color: #fff !important;\r\n      -webkit-text-fill-color: #fff !important;\r\n      background: linear-gradient(135deg, var(--sp-blue), var(--sp-blue-dark)) !important;\r\n      background-color: var(--sp-blue-dark) !important;\r\n      background-image: linear-gradient(135deg, var(--sp-blue), var(--sp-blue-dark)) !important;\r\n      border-color: transparent !important;\r\n      outline: none !important;\r\n      box-shadow: 0 12px 28px rgba(19, 99, 223, .22) !important;\r\n    }\r\n\r\n\r\n    \/* Final override for action buttons: prevents the first active click from flashing white. *\/\r\n    #acc-calculator .acc-action-row > button:active,\r\n    #acc-calculator .acc-action-row > button:focus,\r\n    #acc-calculator .acc-action-row > button:focus-visible,\r\n    #acc-calculator .acc-action-row > button.is-selected,\r\n    #acc-calculator .acc-action-row > button.acc-is-selected,\r\n    #acc-calculator .acc-action-row > button[aria-pressed=\"true\"],\r\n    #acc-calculator .acc-action-row > button.is-selected:hover,\r\n    #acc-calculator .acc-action-row > button.acc-is-selected:hover,\r\n    #acc-calculator .acc-action-row > button[aria-pressed=\"true\"]:hover {\r\n      color: #ffffff !important;\r\n      -webkit-text-fill-color: #ffffff !important;\r\n      background: #082a5e !important;\r\n      background-color: #082a5e !important;\r\n      background-image: linear-gradient(135deg, #1363df, #082a5e) !important;\r\n      border-color: transparent !important;\r\n      box-shadow: 0 12px 28px rgba(19, 99, 223, .24) !important;\r\n      opacity: 1 !important;\r\n    }\r\n\r\n    #acc-calculator .acc-action-row > button.acc-button-selected,\r\n    #acc-calculator .acc-action-row > button.acc-button-selected:hover,\r\n    #acc-calculator .acc-action-row > button.acc-button-selected:active,\r\n    #acc-calculator .acc-action-row > button.acc-button-selected:focus {\r\n      color: #ffffff !important;\r\n      -webkit-text-fill-color: #ffffff !important;\r\n      background: #082a5e !important;\r\n      background-color: #082a5e !important;\r\n      background-image: linear-gradient(135deg, #1363df, #082a5e) !important;\r\n      border-color: transparent !important;\r\n      box-shadow: 0 12px 28px rgba(19, 99, 223, .24) !important;\r\n      opacity: 1 !important;\r\n    }\r\n\r\n\r\n    #acc-calculator .acc-input-box {\r\n      display: grid;\r\n      grid-template-columns: minmax(0, 1fr) auto;\r\n      gap: 12px;\r\n      align-items: center;\r\n      overflow: visible;\r\n    }\r\n\r\n    #acc-calculator .acc-native-select,\r\n    #acc-calculator .acc-native-input {\r\n      border: 0 !important;\r\n      background: transparent !important;\r\n      padding: 2px 0 !important;\r\n      min-height: auto;\r\n      color: var(--sp-blue-dark) !important;\r\n      font-size: var(--acc-value-size) !important;\r\n      font-weight: 900 !important;\r\n      line-height: 1.15 !important;\r\n      letter-spacing: -.04em !important;\r\n      text-transform: none !important;\r\n      outline: none !important;\r\n      box-shadow: none !important;\r\n    }\r\n\r\n    #acc-calculator .acc-native-input::-webkit-outer-spin-button,\r\n    #acc-calculator .acc-native-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }\r\n    #acc-calculator .acc-native-input { appearance: textfield; }\r\n\r\n    #acc-calculator .acc-input-box em {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      min-width: 58px;\r\n      padding: 9px 12px;\r\n      border-radius: 999px;\r\n      background: var(--sp-silver);\r\n      color: var(--sp-blue);\r\n      font-size: 14px;\r\n      font-style: normal;\r\n      font-weight: 900;\r\n      white-space: nowrap;\r\n    }\r\n\r\n    #acc-calculator .acc-warning {\r\n      margin-top: 16px;\r\n      border: 1px solid #bfdcff;\r\n      border-radius: 16px;\r\n      background: #eef7ff;\r\n      color: var(--sp-red);\r\n      padding: 14px 16px;\r\n      font-size: 14px;\r\n      line-height: 1.7;\r\n      display: none;\r\n    }\r\n\r\n    #acc-calculator .acc-result-grid {\r\n      display: grid;\r\n      grid-template-columns: repeat(3, minmax(0, 1fr));\r\n      gap: 10px;\r\n      margin-top: 18px;\r\n    }\r\n\r\n    #acc-calculator .acc-result {\r\n      padding: 13px;\r\n      border-radius: 16px;\r\n      background: linear-gradient(180deg, #fbfdff, #f5f9ff);\r\n      border: 1px dashed rgba(19, 99, 223, .32);\r\n      min-height: 112px;\r\n    }\r\n\r\n    #acc-calculator .acc-result span {\r\n      display: block;\r\n      color: var(--sp-muted);\r\n      font-size: 10.5px;\r\n      font-weight: 900;\r\n      letter-spacing: .04em;\r\n      text-transform: uppercase;\r\n      margin-bottom: 6px;\r\n    }\r\n\r\n    #acc-calculator .acc-result strong {\r\n      display: block;\r\n      color: var(--sp-blue-dark);\r\n      font-size: 22px;\r\n      line-height: 1.08;\r\n      word-break: break-word;\r\n      letter-spacing: -.03em;\r\n    }\r\n\r\n    #acc-calculator .acc-result small {\r\n      display: block;\r\n      margin-top: 7px;\r\n      color: var(--sp-muted);\r\n      font-size: 11px;\r\n      line-height: 1.4;\r\n    }\r\n\r\n    #acc-calculator .acc-action-row {\r\n      display: grid;\r\n      grid-template-columns: 1fr 1fr 1fr;\r\n      gap: 10px;\r\n      margin-top: 18px;\r\n    }\r\n\r\n    #acc-calculator .acc-size-table-wrap {\r\n      margin-top: 18px;\r\n      border: 1px solid var(--sp-line);\r\n      border-radius: 18px;\r\n      overflow: hidden;\r\n      background: #fff;\r\n    }\r\n\r\n    #acc-calculator .acc-table-title {\r\n      display: flex;\r\n      justify-content: space-between;\r\n      align-items: center;\r\n      gap: 12px;\r\n      padding: 13px 16px;\r\n      background: #f8fbff;\r\n      border-bottom: 1px solid var(--sp-line);\r\n      color: var(--sp-blue-dark);\r\n      font-size: 14px;\r\n      font-weight: 900;\r\n    }\r\n\r\n    #acc-calculator table.acc-size-table {\r\n      width: 100%;\r\n      border-collapse: collapse;\r\n      font-size: 13px;\r\n    }\r\n\r\n    #acc-calculator .acc-size-table th,\r\n    #acc-calculator .acc-size-table td {\r\n      padding: 10px 12px;\r\n      border-bottom: 1px solid #edf2f7;\r\n      text-align: right;\r\n      white-space: nowrap;\r\n    }\r\n\r\n    #acc-calculator .acc-size-table th:first-child,\r\n    #acc-calculator .acc-size-table td:first-child { text-align: left; }\r\n\r\n    #acc-calculator .acc-size-table th {\r\n      color: var(--sp-muted);\r\n      font-size: 12px;\r\n      text-transform: uppercase;\r\n      letter-spacing: .04em;\r\n      background: #fff;\r\n    }\r\n\r\n    #acc-calculator .acc-size-table tr.is-active td {\r\n      background: #eef7ff;\r\n      color: var(--sp-blue-dark);\r\n      font-weight: 900;\r\n    }\r\n\r\n    #acc-calculator .acc-size-table tr:last-child td { border-bottom: 0; }\r\n\r\n    #acc-calculator .acc-svg-wrap {\r\n      width: 100%;\r\n      min-height: 470px;\r\n      background: #fff;\r\n      border: 1px solid var(--sp-line);\r\n      border-radius: 24px;\r\n      padding: 18px;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      overflow: visible;\r\n    }\r\n\r\n    #acc-calculator .acc-svg {\r\n      display: block;\r\n      width: auto;\r\n      height: auto;\r\n      max-width: 100%;\r\n      margin: 0 auto;\r\n      overflow: visible;\r\n    }\r\n\r\n    #acc-calculator .acc-svg-text {\r\n      fill: #64748b;\r\n      font-size: 3.2px;\r\n      font-weight: 800;\r\n    }\r\n\r\n    #acc-calculator .acc-svg-text-blue {\r\n      fill: var(--sp-blue);\r\n      font-size: 3.4px;\r\n      font-weight: 800;\r\n    }\r\n\r\n    #acc-calculator .acc-svg-label {\r\n      fill: #55657d;\r\n      font-size: 4.1px;\r\n      font-weight: 700;\r\n      letter-spacing: .02em;\r\n    }\r\n\r\n    #acc-calculator .acc-svg-dim-blue {\r\n      stroke: var(--sp-blue);\r\n      stroke-width: 0.45;\r\n      marker-start: url(#accArrowStart);\r\n      marker-end: url(#accArrowEnd);\r\n    }\r\n\r\n    #acc-calculator .acc-svg-extension {\r\n      stroke: #9bbcff;\r\n      stroke-width: 0.38;\r\n    }\r\n\r\n    #acc-calculator .acc-status-card {\r\n      display: grid;\r\n      grid-template-columns: repeat(3, minmax(0, 1fr));\r\n      gap: 10px;\r\n      margin-top: 16px;\r\n      width: 100%;\r\n    }\r\n\r\n    #acc-calculator .acc-status {\r\n      border: 1px solid var(--sp-line);\r\n      background: #fff;\r\n      border-radius: 16px;\r\n      padding: 14px;\r\n    }\r\n\r\n    #acc-calculator .acc-status span {\r\n      display: block;\r\n      color: var(--sp-muted);\r\n      font-size: 12px;\r\n      font-weight: 900;\r\n      text-transform: uppercase;\r\n      letter-spacing: .04em;\r\n      margin-bottom: 5px;\r\n    }\r\n\r\n    #acc-calculator .acc-status strong {\r\n      display: block;\r\n      color: var(--sp-blue-dark);\r\n      font-size: 20px;\r\n      line-height: 1.1;\r\n      letter-spacing: -.03em;\r\n    }\r\n\r\n    #acc-calculator .acc-product-link-card {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: space-between;\r\n      gap: 12px;\r\n      margin-top: 12px;\r\n      width: 100%;\r\n      padding: 12px 14px;\r\n      border: 1px solid var(--sp-line);\r\n      border-radius: 16px;\r\n      background: linear-gradient(180deg, #fbfdff, #f5f9ff);\r\n    }\r\n\r\n    #acc-calculator .acc-product-link-card[hidden] {\r\n      display: none !important;\r\n    }\r\n\r\n    #acc-calculator .acc-product-link-card span {\r\n      color: var(--sp-muted);\r\n      font-size: 12px;\r\n      font-weight: 900;\r\n      letter-spacing: .035em;\r\n      text-transform: uppercase;\r\n      line-height: 1.35;\r\n    }\r\n\r\n    #acc-calculator .acc-product-link {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      min-height: 36px;\r\n      padding: 9px 13px;\r\n      border-radius: 999px;\r\n      background: var(--sp-blue-dark);\r\n      color: #fff !important;\r\n      -webkit-text-fill-color: #fff !important;\r\n      font-size: 13px;\r\n      font-weight: 900;\r\n      text-decoration: none;\r\n      white-space: nowrap;\r\n      box-shadow: 0 10px 22px rgba(8, 42, 94, .16);\r\n      transition: transform .16s ease, box-shadow .16s ease;\r\n    }\r\n\r\n    #acc-calculator .acc-product-link:hover {\r\n      transform: translateY(-2px);\r\n      box-shadow: 0 14px 28px rgba(8, 42, 94, .22);\r\n    }\r\n\r\n    #acc-calculator .acc-size-table a.acc-size-link {\r\n      color: var(--sp-blue-dark);\r\n      font-weight: 900;\r\n      text-decoration: none;\r\n      border-bottom: 1px solid rgba(19, 99, 223, .35);\r\n    }\r\n\r\n    #acc-calculator .acc-size-table a.acc-size-link:hover {\r\n      color: var(--sp-blue);\r\n      border-bottom-color: currentColor;\r\n    }\r\n\r\n    #acc-calculator .acc-toast {\r\n      position: fixed;\r\n      right: 20px;\r\n      bottom: 20px;\r\n      z-index: 99999;\r\n      transform: translateY(18px);\r\n      opacity: 0;\r\n      pointer-events: none;\r\n      background: #082a5e;\r\n      color: #fff;\r\n      padding: 12px 14px;\r\n      border-radius: 14px;\r\n      box-shadow: 0 18px 50px rgba(8, 42, 94, .22);\r\n      transition: opacity .18s ease, transform .18s ease;\r\n      font-weight: 800;\r\n      font-size: 14px;\r\n    }\r\n\r\n    #acc-calculator .acc-toast.is-visible {\r\n      opacity: 1;\r\n      transform: translateY(0);\r\n    }\r\n\r\n\r\n\r\n    \/* Final action-button style: transparent background, deep-blue text, no visual change on click\/selection. *\/\r\n    #acc-calculator .acc-action-row > button,\r\n    #acc-calculator .acc-action-row > button:hover,\r\n    #acc-calculator .acc-action-row > button:active,\r\n    #acc-calculator .acc-action-row > button:focus,\r\n    #acc-calculator .acc-action-row > button:focus-visible,\r\n    #acc-calculator .acc-action-row > button.is-selected,\r\n    #acc-calculator .acc-action-row > button.acc-is-selected,\r\n    #acc-calculator .acc-action-row > button.acc-button-selected,\r\n    #acc-calculator .acc-action-row > button[aria-pressed=\"true\"],\r\n    #acc-calculator .acc-action-row > button.is-selected:hover,\r\n    #acc-calculator .acc-action-row > button.acc-is-selected:hover,\r\n    #acc-calculator .acc-action-row > button.acc-button-selected:hover,\r\n    #acc-calculator .acc-action-row > button[aria-pressed=\"true\"]:hover {\r\n      color: #082a5e !important;\r\n      -webkit-text-fill-color: #082a5e !important;\r\n      background: transparent !important;\r\n      background-color: transparent !important;\r\n      background-image: none !important;\r\n      border-color: var(--sp-line) !important;\r\n      box-shadow: none !important;\r\n      transform: none !important;\r\n      opacity: 1 !important;\r\n      outline: none !important;\r\n    }\r\n\r\n    @media (max-width: 1080px) {\r\n      #acc-calculator .acc-browser-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }\r\n    }\r\n\r\n    @media (max-width: 980px) {\r\n      #acc-calculator .acc-workspace { grid-template-columns: 1fr; }\r\n      #acc-calculator .acc-preview-panel { min-height: auto; }\r\n      #acc-calculator .acc-feature-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }\r\n    }\r\n\r\n    @media (max-width: 720px) {\r\n      #acc-calculator {\r\n        --acc-value-size: 22px;\r\n      }\r\n\r\n      #acc-calculator .acc-action-row,\r\n      #acc-calculator .acc-result-grid,\r\n      #acc-calculator .acc-feature-row,\r\n      #acc-calculator .acc-status-card,\r\n      #acc-calculator .acc-height-quick-row,\r\n      #acc-calculator .acc-browser-grid {\r\n        grid-template-columns: 1fr;\r\n      }\r\n\r\n      #acc-calculator .acc-svg-wrap { min-height: 420px; }\r\n      #acc-calculator .acc-browser { padding: 22px 18px; }\r\n      #acc-calculator .acc-split-row { grid-template-columns: 1fr; }\r\n    }\r\n\r\n    @media (max-width: 620px) {\r\n      #acc-calculator .acc-shell { padding: 22px 16px; }\r\n      #acc-calculator .acc-title-row { flex-direction: column; }\r\n      #acc-calculator .acc-reset,\r\n      #acc-calculator .acc-copy,\r\n      #acc-calculator .acc-clear { width: 100%; }\r\n      #acc-calculator .acc-size-table-wrap,\r\n      #acc-calculator .acc-browser-table-wrap { overflow-x: auto; }\r\n    }\r\n\r\n\r\n    \/* v36: action buttons stay transparent\/deep-blue, hover only adds lift + shadow. *\/\r\n    #acc-calculator .acc-action-row > button,\r\n    #acc-calculator .acc-action-row > button:focus,\r\n    #acc-calculator .acc-action-row > button:focus-visible,\r\n    #acc-calculator .acc-action-row > button:active,\r\n    #acc-calculator .acc-action-row > button.is-selected,\r\n    #acc-calculator .acc-action-row > button.acc-is-selected,\r\n    #acc-calculator .acc-action-row > button.acc-button-selected,\r\n    #acc-calculator .acc-action-row > button[aria-pressed=\"true\"] {\r\n      color: #082a5e !important;\r\n      -webkit-text-fill-color: #082a5e !important;\r\n      background: transparent !important;\r\n      background-color: transparent !important;\r\n      background-image: none !important;\r\n      border-color: var(--sp-line) !important;\r\n      box-shadow: none !important;\r\n      transform: translateY(0) !important;\r\n      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;\r\n      outline: none !important;\r\n    }\r\n\r\n    #acc-calculator .acc-action-row > button:hover,\r\n    #acc-calculator .acc-action-row > button:focus:hover,\r\n    #acc-calculator .acc-action-row > button:focus-visible:hover,\r\n    #acc-calculator .acc-action-row > button:active:hover,\r\n    #acc-calculator .acc-action-row > button.is-selected:hover,\r\n    #acc-calculator .acc-action-row > button.acc-is-selected:hover,\r\n    #acc-calculator .acc-action-row > button.acc-button-selected:hover,\r\n    #acc-calculator .acc-action-row > button[aria-pressed=\"true\"]:hover {\r\n      color: #082a5e !important;\r\n      -webkit-text-fill-color: #082a5e !important;\r\n      background: transparent !important;\r\n      background-color: transparent !important;\r\n      background-image: none !important;\r\n      border-color: rgba(8, 42, 94, .22) !important;\r\n      box-shadow: 0 14px 28px rgba(8, 42, 94, .16) !important;\r\n      transform: translateY(-3px) !important;\r\n    }\r\n\r\n\r\n    \/* v36 fix: selected\/focused action buttons must not keep old shadows; hover alone lifts. *\/\r\n    #acc-calculator .acc-action-row > button.is-selected:not(:hover),\r\n    #acc-calculator .acc-action-row > button.acc-is-selected:not(:hover),\r\n    #acc-calculator .acc-action-row > button.acc-button-selected:not(:hover),\r\n    #acc-calculator .acc-action-row > button[aria-pressed=\"true\"]:not(:hover),\r\n    #acc-calculator .acc-action-row > button.is-selected:focus:not(:hover),\r\n    #acc-calculator .acc-action-row > button.acc-is-selected:focus:not(:hover),\r\n    #acc-calculator .acc-action-row > button.acc-button-selected:focus:not(:hover),\r\n    #acc-calculator .acc-action-row > button[aria-pressed=\"true\"]:focus:not(:hover),\r\n    #acc-calculator .acc-action-row > button.is-selected:focus-visible:not(:hover),\r\n    #acc-calculator .acc-action-row > button.acc-is-selected:focus-visible:not(:hover),\r\n    #acc-calculator .acc-action-row > button.acc-button-selected:focus-visible:not(:hover),\r\n    #acc-calculator .acc-action-row > button[aria-pressed=\"true\"]:focus-visible:not(:hover),\r\n    #acc-calculator .acc-action-row > button.is-selected:active:not(:hover),\r\n    #acc-calculator .acc-action-row > button.acc-is-selected:active:not(:hover),\r\n    #acc-calculator .acc-action-row > button.acc-button-selected:active:not(:hover),\r\n    #acc-calculator .acc-action-row > button[aria-pressed=\"true\"]:active:not(:hover) {\r\n      color: #082a5e !important;\r\n      -webkit-text-fill-color: #082a5e !important;\r\n      background: transparent !important;\r\n      background-color: transparent !important;\r\n      background-image: none !important;\r\n      border-color: var(--sp-line) !important;\r\n      box-shadow: none !important;\r\n      transform: translateY(0) !important;\r\n    }\r\n\r\n    #acc-calculator .acc-action-row > button.is-selected:focus:hover,\r\n    #acc-calculator .acc-action-row > button.acc-is-selected:focus:hover,\r\n    #acc-calculator .acc-action-row > button.acc-button-selected:focus:hover,\r\n    #acc-calculator .acc-action-row > button[aria-pressed=\"true\"]:focus:hover,\r\n    #acc-calculator .acc-action-row > button.is-selected:focus-visible:hover,\r\n    #acc-calculator .acc-action-row > button.acc-is-selected:focus-visible:hover,\r\n    #acc-calculator .acc-action-row > button.acc-button-selected:focus-visible:hover,\r\n    #acc-calculator .acc-action-row > button[aria-pressed=\"true\"]:focus-visible:hover,\r\n    #acc-calculator .acc-action-row > button.is-selected:active:hover,\r\n    #acc-calculator .acc-action-row > button.acc-is-selected:active:hover,\r\n    #acc-calculator .acc-action-row > button.acc-button-selected:active:hover,\r\n    #acc-calculator .acc-action-row > button[aria-pressed=\"true\"]:active:hover {\r\n      color: #082a5e !important;\r\n      -webkit-text-fill-color: #082a5e !important;\r\n      background: transparent !important;\r\n      background-color: transparent !important;\r\n      background-image: none !important;\r\n      border-color: rgba(8, 42, 94, .22) !important;\r\n      box-shadow: 0 14px 28px rgba(8, 42, 94, .16) !important;\r\n      transform: translateY(-3px) !important;\r\n    }\r\n<\/style>\r\n\r\n  <div class=\"acc-shell\">\r\n    <div class=\"acc-hero\">\r\n      <div class=\"acc-badge\">Estimador de capacidad de latas de aerosol<\/div>\r\n      <h1>Calculadora de capacidad de latas de aerosol<\/h1>\r\n      <p>\r\n        Utilice la tabla de tama\u00f1os de latas de aerosol de aluminio aprobadas para comprobar la capacidad m\u00e1xima, la capacidad de llenado de gas l\u00edquido y la capacidad de llenado de gas comprimido. La altura utiliza el valor introducido de forma din\u00e1mica dentro del rango de di\u00e1metro seleccionado, mientras que la tabla de tama\u00f1os est\u00e1ndar permanece disponible a continuaci\u00f3n.\r\n      <\/p>\r\n    <\/div>\r\n\r\n    <div class=\"acc-workspace\">\r\n      <div class=\"acc-preview-column\">\r\n        <section class=\"acc-preview-panel\">\r\n          <div>\r\n            <div class=\"acc-svg-wrap\">\r\n              <svg id=\"accCanSvg\" class=\"acc-svg\" viewbox=\"0 0 240 410\" aria-label=\"Diagrama de la lata de aerosol\">\r\n                <defs>\r\n                  <lineargradient id=\"accMetal\" x1=\"0\" x2=\"1\" y1=\"0\" y2=\"0\">\r\n                    <stop offset=\"0%\" stop-color=\"#cbd5e1\"><\/stop>\r\n                    <stop offset=\"18%\" stop-color=\"#f8fafc\"><\/stop>\r\n                    <stop offset=\"48%\" stop-color=\"#e2e8f0\"><\/stop>\r\n                    <stop offset=\"76%\" stop-color=\"#ffffff\"><\/stop>\r\n                    <stop offset=\"100%\" stop-color=\"#94a3b8\"><\/stop>\r\n                  <\/lineargradient>\r\n                  <lineargradient id=\"accLiquid\" x1=\"0\" x2=\"0\" y1=\"0\" y2=\"1\">\r\n                    <stop offset=\"0%\" stop-color=\"#dbeafe\" stop-opacity=\"0.76\"><\/stop>\r\n                    <stop offset=\"100%\" stop-color=\"#60a5fa\" stop-opacity=\"0.46\"><\/stop>\r\n                  <\/lineargradient>\r\n                  <clippath id=\"accCanClip\">\r\n                    <path id=\"accCanClipPath\"><\/path>\r\n                  <\/clippath>\r\n                  <marker id=\"accArrowStart\" markerwidth=\"4\" markerheight=\"4\" refx=\"0.5\" refy=\"2\" orient=\"auto-start-reverse\">\r\n                    <path d=\"M 4 0 L 0 2 L 4 4 z\" fill=\"#1363df\"><\/path>\r\n                  <\/marker>\r\n                  <marker id=\"accArrowEnd\" markerwidth=\"4\" markerheight=\"4\" refx=\"3.5\" refy=\"2\" orient=\"auto\">\r\n                    <path d=\"M 0 0 L 4 2 L 0 4 z\" fill=\"#1363df\"><\/path>\r\n                  <\/marker>\r\n                <\/defs>\r\n                <path id=\"accCanFill\" fill=\"url(#accMetal)\" stroke=\"none\"><\/path>\r\n                <g clip-path=\"url(#accCanClip)\">\r\n                  <rect id=\"accLiquidRect\" x=\"0\" y=\"120\" width=\"260\" height=\"230\" fill=\"url(#accLiquid)\"><\/rect>\r\n                  <line id=\"accLiquidLine\" x1=\"40\" y1=\"120\" x2=\"150\" y2=\"120\" stroke=\"#1363df\" stroke-width=\"0.7\" stroke-dasharray=\"2 1.8\"><\/line>\r\n                <\/g>\r\n                <path id=\"accCanStroke\" fill=\"none\" stroke=\"#475569\" stroke-width=\"0.85\"><\/path>\r\n                <line id=\"accMouthLeftExt\" class=\"acc-svg-extension\"><\/line>\r\n                <line id=\"accMouthRightExt\" class=\"acc-svg-extension\"><\/line>\r\n                <line id=\"accMouthLine\" class=\"acc-svg-dim-blue\"><\/line>\r\n                <text id=\"accMouthText\" class=\"acc-svg-text-blue\"><\/text>\r\n                <text id=\"accMouthNote\" class=\"acc-svg-text-blue\"><\/text>\r\n                <rect id=\"accCup\" fill=\"#e2e8f0\" stroke=\"#475569\" stroke-width=\"0.5\" rx=\"1.4\"><\/rect>\r\n                <rect id=\"accValve\" fill=\"#f8fafc\" stroke=\"#475569\" stroke-width=\"0.5\" rx=\"1.6\"><\/rect>\r\n                <line id=\"accStem\" stroke=\"#64748b\" stroke-width=\"0.45\"><\/line>\r\n                <line id=\"accHeightLine\" class=\"acc-svg-secondary\" stroke=\"#94a3b8\" stroke-width=\"0.45\"><\/line>\r\n                <line id=\"accHeightTopTick\" class=\"acc-svg-secondary\" stroke=\"#94a3b8\" stroke-width=\"0.45\"><\/line>\r\n                <line id=\"accHeightBottomTick\" class=\"acc-svg-secondary\" stroke=\"#94a3b8\" stroke-width=\"0.45\"><\/line>\r\n                <text id=\"accHeightText\" class=\"acc-svg-text acc-svg-secondary\"><\/text>\r\n                <line id=\"accDiameterLine\" class=\"acc-svg-secondary\" stroke=\"#94a3b8\" stroke-width=\"0.45\"><\/line>\r\n                <line id=\"accDiameterLeftTick\" class=\"acc-svg-secondary\" stroke=\"#94a3b8\" stroke-width=\"0.45\"><\/line>\r\n                <line id=\"accDiameterRightTick\" class=\"acc-svg-secondary\" stroke=\"#94a3b8\" stroke-width=\"0.45\"><\/line>\r\n                <text id=\"accDiameterText\" class=\"acc-svg-text acc-svg-secondary\"><\/text>\r\n                <text id=\"accFillText\" class=\"acc-svg-text acc-svg-secondary\"><\/text>\r\n                <text id=\"accCanLabel\" class=\"acc-svg-label\">Ingredientes<\/text>\r\n              <\/svg>\r\n            <\/div>\r\n            <div class=\"acc-status-card\">\r\n              <div class=\"acc-status\">\r\n                <span>Tama\u00f1o seleccionado<\/span>\r\n                <strong id=\"accStatusSize\">\u2014<\/strong>\r\n              <\/div>\r\n              <div class=\"acc-status\">\r\n                <span>Nivel de llenado<\/span>\r\n                <strong id=\"accStatusRatio\">\u2014<\/strong>\r\n              <\/div>\r\n              <div class=\"acc-status\">\r\n                <span>Boca<\/span>\r\n                <strong id=\"accStatusMouth\">\u2014<\/strong>\r\n              <\/div>\r\n            <\/div>\r\n            <div class=\"acc-product-link-card\" id=\"accProductLinkCard\" hidden>\r\n              <span id=\"accProductLinkLabel\">P\u00e1gina del producto para la talla seleccionada<\/span>\r\n              <a id=\"accProductLink\" class=\"acc-product-link\" href=\"#\" target=\"_blank\" rel=\"nofollow noopener\">Ver p\u00e1gina del producto<\/a>\r\n            <\/div>\r\n          <\/div>\r\n        <\/section>\r\n      <\/div>\r\n\r\n      <section class=\"acc-panel\">\r\n        <div class=\"acc-title-row\">\r\n          <div>\r\n            <h3>Tama\u00f1o de entrada<\/h3>\r\n            <p>Primero, seleccione el di\u00e1metro de la lata y, a continuaci\u00f3n, introduzca una altura dentro del rango admitido.<\/p>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"acc-input-grid\">\r\n          <div class=\"acc-split-row\">\r\n            <label class=\"acc-field\">\r\n              <span>Di\u00e1metro de la lata<\/span>\r\n              <small>Primero elige el di\u00e1metro.<\/small>\r\n              <div class=\"acc-input-box\">\r\n                <select id=\"accDiameter\" class=\"acc-native-select\"><\/select>\r\n                <em>mm<\/em>\r\n              <\/div>\r\n            <\/label>\r\n\r\n            <label class=\"acc-field\">\r\n              <span>Altura de la lata<\/span>\r\n              <div id=\"accHeightRange\" class=\"acc-height-range\">Rango: -<\/div>\r\n              <div class=\"acc-input-box\">\r\n                <input id=\"accHeight\" class=\"acc-native-input\" type=\"number\" step=\"1\" \/>\r\n                <em>mm<\/em>\r\n              <\/div>\r\n            <\/label>\r\n          <\/div>\r\n\r\n          <label class=\"acc-field acc-mouth-field\" id=\"accMouthField\" hidden>\r\n            <span>Di\u00e1metro de la boca<\/span>\r\n            <small id=\"accMouthHelp\">Elija una boca de 20 mm o 25,4 mm (1 pulgada) para este di\u00e1metro.<\/small>\r\n            <div class=\"acc-input-box\">\r\n              <select id=\"accMouth\" class=\"acc-native-select\"><\/select>\r\n              <em>boca<\/em>\r\n            <\/div>\r\n          <\/label>\r\n\r\n          <label class=\"acc-field\">\r\n            <span>Modo de llenado de pantalla<\/span>\r\n            <small>Controla el nivel de relleno azul en la vista previa.<\/small>\r\n            <div class=\"acc-input-box\">\r\n              <select id=\"accMode\" class=\"acc-native-select\">\r\n                <option>Gas l\u00edquido<\/option>\r\n                <option>Gas comprimido<\/option>\r\n                <option>Capacidad completa<\/option>\r\n              <\/select>\r\n              <em>modo<\/em>\r\n            <\/div>\r\n          <\/label>\r\n        <\/div>\r\n\r\n        <div id=\"accWarning\" class=\"acc-warning\"><\/div>\r\n\r\n        <div class=\"acc-result-grid\">\r\n          <div class=\"acc-result\">\r\n            <span>Capacidad completa<\/span>\r\n            <strong><b id=\"accFullMl\">0 ml<\/b><\/strong>\r\n            <small>onzas l\u00edquidas estadounidenses: <i id=\"accFullUsOz\">0<\/i><br>onzas l\u00edquidas del Reino Unido: <i id=\"accFullUkOz\">0<\/i><\/small>\r\n          <\/div>\r\n\r\n          <div class=\"acc-result\">\r\n            <span>Gas l\u00edquido<\/span>\r\n            <strong><b id=\"accLiquidMl\">0 ml<\/b><\/strong>\r\n            <small>onzas l\u00edquidas estadounidenses: <i id=\"accLiquidUsOz\">0<\/i><br>onzas l\u00edquidas del Reino Unido: <i id=\"accLiquidUkOz\">0<\/i><\/small>\r\n          <\/div>\r\n\r\n          <div class=\"acc-result\">\r\n            <span>Gas comprimido<\/span>\r\n            <strong><b id=\"accCompressedMl\">\u2014<\/b><\/strong>\r\n            <small>onzas l\u00edquidas estadounidenses: <i id=\"accCompressedUsOz\">\u2014<\/i><br>onzas l\u00edquidas del Reino Unido: <i id=\"accCompressedUkOz\">\u2014<\/i><\/small>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"acc-action-row\">\r\n          <button type=\"button\" class=\"acc-copy\" id=\"accCopy\">Copiar resultado<\/button>\r\n          <button type=\"button\" class=\"acc-reset\" id=\"accReset\">Ejemplo de reinicio<\/button>\r\n          <button type=\"button\" class=\"acc-clear\" id=\"accCopyTable\">Tabla de tama\u00f1o de copia<\/button>\r\n        <\/div>\r\n\r\n        <div class=\"acc-size-table-wrap\">\r\n          <div class=\"acc-table-title\">\r\n            <span id=\"accTableTitle\">Tama\u00f1os disponibles para el di\u00e1metro seleccionado<\/span>\r\n            <span id=\"accTableCount\">0 tama\u00f1os<\/span>\r\n          <\/div>\r\n          <table class=\"acc-size-table\">\r\n            <thead>\r\n              <tr>\r\n                <th>Tama\u00f1o<\/th>\r\n                <th>Lleno<\/th>\r\n                <th>L\u00edquido<\/th>\r\n                <th>Comprimido<\/th>\r\n              <\/tr>\r\n            <\/thead>\r\n            <tbody id=\"accCompatibleRows\"><\/tbody>\r\n          <\/table>\r\n        <\/div>\r\n      <\/section>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"acc-toast\" id=\"accToast\" role=\"status\" aria-live=\"polite\">Copiado<\/div>\r\n\r\n  <script>\r\n    (function () {\r\n      var root = document.getElementById('acc-calculator');\r\n      if (!root || root.dataset.accReady === 'true') return;\r\n      root.dataset.accReady = 'true';\r\n\r\n      var canData = [\r\n        { no: 1, size: '\u03a622 \u00d7 52', d: 22, h: 52, full: 17, liquid: 12, compressed: null },\r\n        { no: 2, size: '\u03a622 \u00d7 68', d: 22, h: 68, full: 23, liquid: 15, compressed: null },\r\n        { no: 3, size: '\u03a625 \u00d7 65', d: 25, h: 65, full: 28, liquid: 20, compressed: null },\r\n        { no: 4, size: '\u03a625 \u00d7 95', d: 25, h: 95, full: 41, liquid: 30, compressed: null },\r\n        { no: 5, size: '\u03a635 \u00d7 65', d: 35, h: 65, full: 53, liquid: 40, compressed: 30 },\r\n        { no: 6, size: '\u03a635 \u00d7 88', d: 35, h: 88, full: 75, liquid: 50, compressed: null },\r\n        { no: 7, size: '\u03a635 \u00d7 105', d: 35, h: 105, full: 89, liquid: 50, compressed: null },\r\n        { no: 8, size: '\u03a638 \u00d7 90', d: 38, h: 90, full: 89, liquid: 50, compressed: null },\r\n        { no: 9, size: '\u03a635 \u00d7 125', d: 35, h: 125, full: 110, liquid: 75, compressed: null },\r\n        { no: 10, size: '\u03a638 \u00d7 110', d: 38, h: 110, full: 110, liquid: 75, compressed: null },\r\n        { no: 11, size: '\u03a640 \u00d7 100', d: 40, h: 100, full: 110, liquid: 75, compressed: null },\r\n        { no: 12, size: '\u03a638 \u00d7 125', d: 38, h: 125, full: 120, liquid: 80, compressed: 65 },\r\n        { no: 13, size: '\u03a635 \u00d7 135', d: 35, h: 135, full: 125, liquid: 85, compressed: 65 },\r\n        { no: 14, size: '\u03a635 \u00d7 156', d: 35, h: 156, full: 140, liquid: 100, compressed: 75 },\r\n        { no: 15, size: '\u03a638 \u00d7 138', d: 38, h: 138, full: 140, liquid: 100, compressed: 75 },\r\n        { no: 16, size: '\u03a640 \u00d7 125', d: 40, h: 125, full: 140, liquid: 100, compressed: 75 },\r\n        { no: 17, size: '\u03a645 \u00d7 105', d: 45, h: 105, full: 140, liquid: 100, compressed: 75 },\r\n        { no: 18, size: '\u03a638 \u00d7 165', d: 38, h: 165, full: 150, liquid: 125, compressed: 100 },\r\n        { no: 19, size: '\u03a640 \u00d7 140', d: 40, h: 140, full: 150, liquid: 125, compressed: 100 },\r\n        { no: 20, size: '\u03a640 \u00d7 156', d: 40, h: 156, full: 175, liquid: 125, compressed: 100 },\r\n        { no: 21, size: '\u03a645 \u00d7 125', d: 45, h: 125, full: 175, liquid: 125, compressed: 100 },\r\n        { no: 22, size: '\u03a645 \u00d7 150', d: 45, h: 150, full: 210, liquid: 150, compressed: 125 },\r\n        { no: 23, size: '\u03a650 \u00d7 125', d: 50, h: 125, full: 210, liquid: 150, compressed: 125 },\r\n        { no: 24, size: '\u03a653 \u00d7 110', d: 53, h: 110, full: 210, liquid: 150, compressed: 125 },\r\n        { no: 25, size: '\u03a645 \u00d7 190', d: 45, h: 190, full: 270, liquid: 200, compressed: 150 },\r\n        { no: 26, size: '\u03a650 \u00d7 156', d: 50, h: 156, full: 270, liquid: 200, compressed: 150 },\r\n        { no: 27, size: '\u03a653 \u00d7 142', d: 53, h: 142, full: 270, liquid: 200, compressed: 150 },\r\n        { no: 28, size: '\u03a653 \u00d7 160', d: 53, h: 160, full: 300, liquid: 225, compressed: 175 },\r\n        { no: 29, size: '\u03a650 \u00d7 190', d: 50, h: 190, full: 335, liquid: 250, compressed: 200 },\r\n        { no: 30, size: '\u03a653 \u00d7 173', d: 53, h: 173, full: 335, liquid: 250, compressed: 200 },\r\n        { no: 31, size: '\u03a659 \u00d7 142', d: 59, h: 142, full: 335, liquid: 250, compressed: 200 },\r\n        { no: 32, size: '\u03a653 \u00d7 190', d: 53, h: 190, full: 350, liquid: 275, compressed: 225 },\r\n        { no: 33, size: '\u03a650 \u00d7 225', d: 50, h: 225, full: 405, liquid: 300, compressed: 250 },\r\n        { no: 34, size: '\u03a653 \u00d7 205', d: 53, h: 205, full: 405, liquid: 300, compressed: 250 },\r\n        { no: 35, size: '\u03a659 \u00d7 169', d: 59, h: 169, full: 405, liquid: 300, compressed: 250 },\r\n        { no: 36, size: '\u03a666 \u00d7 143', d: 66, h: 143, full: 405, liquid: 300, compressed: 250 },\r\n        { no: 37, size: '\u03a659 \u00d7 214', d: 59, h: 214, full: 520, liquid: 400, compressed: 300 },\r\n        { no: 38, size: '\u03a666 \u00d7 178', d: 66, h: 178, full: 520, liquid: 400, compressed: 300 },\r\n        { no: 39, size: '\u03a666 \u00d7 218', d: 66, h: 218, full: 650, liquid: 500, compressed: 400 },\r\n        { no: 40, size: '\u03a666 \u00d7 260', d: 66, h: 260, full: 800, liquid: 600, compressed: 500 },\r\n        { no: 41, size: '\u03a674 \u00d7 210', d: 74, h: 210, full: 800, liquid: 600, compressed: 500 },\r\n        { no: 42, size: '\u03a674 \u00d7 263', d: 74, h: 263, full: 1000, liquid: 750, compressed: 600 },\r\n        { no: 43, size: '\u03a680 \u00d7 226', d: 80, h: 226, full: 1000, liquid: 750, compressed: 600 }\r\n      ];\r\n\r\n      var productUrlBySize = {\r\n              \"\u03a622 \u00d7 68\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/22068-aluminum-aerosol-can\",\r\n              \"\u03a625 \u00d7 65\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/25065-aluminum-aerosol-can\",\r\n              \"\u03a625 \u00d7 95\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/25095-aluminum-aerosol-can\",\r\n              \"\u03a635 \u00d7 65\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/35065-aluminum-aerosol-can\",\r\n              \"\u03a635 \u00d7 88\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/35088-aluminum-aerosol-can\",\r\n              \"\u03a635 \u00d7 105\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/35105-aluminum-aerosol-can\",\r\n              \"\u03a638 \u00d7 90\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/38090-aluminum-aerosol-can\",\r\n              \"\u03a635 \u00d7 125\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/35125-aluminum-aerosol-can\",\r\n              \"\u03a638 \u00d7 110\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/38110-aluminum-aerosol-can\",\r\n              \"\u03a640 \u00d7 100\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/40100-aluminum-aerosol-can\",\r\n              \"\u03a638 \u00d7 125\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/38125-aluminum-aerosol-can\",\r\n              \"\u03a635 \u00d7 135\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/35135-aluminum-aerosol-can\",\r\n              \"\u03a635 \u00d7 156\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/35156-aluminum-aerosol-can\",\r\n              \"\u03a638 \u00d7 138\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/38138-aluminum-aerosol-can\",\r\n              \"\u03a640 \u00d7 125\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/40125-aluminum-aerosol-can\",\r\n              \"\u03a645 \u00d7 105\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/45105-aluminum-aerosol-can\",\r\n              \"\u03a638 \u00d7 165\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/38165-aluminum-aerosol-can\",\r\n              \"\u03a640 \u00d7 140\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/40140-aluminum-aerosol-can\",\r\n              \"\u03a640 \u00d7 156\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/40156-aluminum-aerosol-can\",\r\n              \"\u03a645 \u00d7 125\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/45125-aluminum-aerosol-can\",\r\n              \"\u03a645 \u00d7 150\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/45150-aluminum-aerosol-can\",\r\n              \"\u03a650 \u00d7 125\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/50125-aluminum-aerosol-can\",\r\n              \"\u03a653 \u00d7 110\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/53110-aluminum-aerosol-can\",\r\n              \"\u03a645 \u00d7 190\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/45190-aluminum-aerosol-can\",\r\n              \"\u03a650 \u00d7 156\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/50156-aluminum-aerosol-can\",\r\n              \"\u03a653 \u00d7 142\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/53142-aluminum-aerosol-can\",\r\n              \"\u03a653 \u00d7 160\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/53160-aluminum-aerosol-can\",\r\n              \"\u03a650 \u00d7 190\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/50190-aluminum-aerosol-can\",\r\n              \"\u03a653 \u00d7 173\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/53173-aluminum-aerosol-can\",\r\n              \"\u03a659 \u00d7 142\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/59142-aluminum-aerosol-can\",\r\n              \"\u03a653 \u00d7 190\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/53190-aluminum-aerosol-can\",\r\n              \"\u03a650 \u00d7 225\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/50225-aluminum-aerosol-can\",\r\n              \"\u03a653 \u00d7 205\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/53205-aluminum-aerosol-can\",\r\n              \"\u03a659 \u00d7 169\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/59169-aluminum-aerosol-can\",\r\n              \"\u03a666 \u00d7 143\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/66143-aluminum-aerosol-can\",\r\n              \"\u03a659 \u00d7 214\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/59214-aluminum-aerosol-can\",\r\n              \"\u03a666 \u00d7 178\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/66178-aluminum-aerosol-can\",\r\n              \"\u03a666 \u00d7 218\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/66218-aluminum-aerosol-can\",\r\n              \"\u03a666 \u00d7 260\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/66260-aluminum-aerosol-can\",\r\n              \"\u03a674 \u00d7 210\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/74210-aluminum-aerosol-can\",\r\n              \"\u03a674 \u00d7 263\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/74263-aluminum-aerosol-can\",\r\n              \"\u03a680 \u00d7 226\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/80226-aluminum-aerosol-can\"\r\n      };\r\n\r\n      var DIAGRAM_SCALE = 1.85;\r\n      var DEFAULT_DIAMETER = 53;\r\n      var DEFAULT_HEIGHT = 205;\r\n      var DEFAULT_MODE = 'Liquid Gas';\r\n      var DEFAULT_MOUTH = 25.4;\r\n      var warningTimer = null;\r\n\r\n      var mouthOptionsByDiameter = {\r\n        22: [20],\r\n        25: [20],\r\n        35: [25.4, 20],\r\n        38: [25.4],\r\n        40: [25.4, 20],\r\n        45: [25.4, 20],\r\n        50: [25.4],\r\n        53: [25.4],\r\n        59: [25.4],\r\n        66: [25.4],\r\n        74: [25.4],\r\n        80: [25.4]\r\n      };\r\n\r\n\r\n      var heightRangeByDiameter = {\r\n        22: { min: 50, max: 90 },\r\n        25: { min: 65, max: 95 },\r\n        28: { min: 75, max: 100 },\r\n        35: { min: 65, max: 160 },\r\n        40: { min: 80, max: 180 },\r\n        45: { min: 100, max: 190 },\r\n        50: { min: 110, max: 225 },\r\n        53: { min: 110, max: 235 },\r\n        59: { min: 120, max: 250 },\r\n        66: { min: 140, max: 240 },\r\n        74: { min: 160, max: 300 },\r\n        80: { min: 180, max: 300 }\r\n      };\r\n\r\n      var state = {\r\n        diameter: DEFAULT_DIAMETER,\r\n        heightInput: DEFAULT_HEIGHT,\r\n        matchedHeight: DEFAULT_HEIGHT,\r\n        mouth: DEFAULT_MOUTH,\r\n        mode: DEFAULT_MODE\r\n      };\r\n\r\n      var filterState = {\r\n        diameter: null,\r\n        height: null,\r\n        liquid: null,\r\n        compressed: null,\r\n        full: null\r\n      };\r\n\r\n      function $(id) { return root.querySelector('#' + id); }\r\n      function roundTo(value, digits) {\r\n        var base = Math.pow(10, digits || 0);\r\n        return Math.round(value * base) \/ base;\r\n      }\r\n      function setLine(el, x1, y1, x2, y2) {\r\n        el.setAttribute('x1', x1); el.setAttribute('y1', y1); el.setAttribute('x2', x2); el.setAttribute('y2', y2);\r\n      }\r\n      function showToast(message) {\r\n        var toast = $('accToast');\r\n        toast.textContent = message;\r\n        toast.classList.add('is-visible');\r\n        clearTimeout(showToast.timer);\r\n        showToast.timer = setTimeout(function () { toast.classList.remove('is-visible'); }, 1400);\r\n      }\r\n      function showWarning(message) {\r\n        var warning = $('accWarning');\r\n        warning.textContent = message;\r\n        warning.style.display = 'block';\r\n        clearTimeout(warningTimer);\r\n        warningTimer = setTimeout(function () { warning.style.display = 'none'; }, 3400);\r\n      }\r\n      function hideWarning() {\r\n        clearTimeout(warningTimer);\r\n        $('accWarning').style.display = 'none';\r\n      }\r\n      function formatValue(value) { return value === null || typeof value === 'undefined' ? '\u2014' : String(value); }\r\n      function getProductUrl(row) {\r\n        return row && row.size ? productUrlBySize[row.size] || '' : '';\r\n      }\r\n      function renderProductLink(referenceItem, displayItem) {\r\n        var card = $('accProductLinkCard');\r\n        var link = $('accProductLink');\r\n        var label = $('accProductLinkLabel');\r\n        if (!card || !link || !label) return;\r\n        var url = getProductUrl(referenceItem);\r\n        if (!url) {\r\n          card.hidden = true;\r\n          link.removeAttribute('href');\r\n          return;\r\n        }\r\n        var exact = displayItem && Math.abs(Number(displayItem.h) - Number(referenceItem.h)) < 0.01;\r\n        label.textContent = exact ? 'Product page for ' + referenceItem.size : 'Closest standard product: ' + referenceItem.size;\r\n        link.textContent = exact ? 'View product page' : 'View closest product';\r\n        link.href = url;\r\n        card.hidden = false;\r\n      }\r\n      function formatNumber(value) {\r\n        if (value === null || typeof value === 'undefined') return '\u2014';\r\n        return Math.abs(value - Math.round(value)) < 0.001 ? String(Math.round(value)) : String(roundTo(value, 1));\r\n      }\r\n      function formatUsOz(value) {\r\n        return value === null || typeof value === 'undefined' ? '\u2014' : roundTo(value \/ 29.5735295625, 2);\r\n      }\r\n      function formatUkOz(value) {\r\n        return value === null || typeof value === 'undefined' ? '\u2014' : roundTo(value \/ 28.4130625, 2);\r\n      }\r\n      function getMouthOptionsForDiameter(diameter) {\r\n        return mouthOptionsByDiameter[Number(diameter)] || [25.4];\r\n      }\r\n      function isSameMouth(a, b) { return Math.abs(Number(a) - Number(b)) < 0.01; }\r\n      function formatMouth(value) {\r\n        return isSameMouth(value, 25.4) ? '25.4 mm (1 inch)' : '20 mm';\r\n      }\r\n      function getShortMouth(value) {\r\n        return isSameMouth(value, 25.4) ? '25.4 mm' : '20 mm';\r\n      }\r\n      function syncMouthControl() {\r\n        var options = getMouthOptionsForDiameter(state.diameter);\r\n        var mouthSelect = $('accMouth');\r\n        var mouthField = $('accMouthField');\r\n        var mouthHelp = $('accMouthHelp');\r\n        if (!mouthSelect || !mouthField) return;\r\n        var chosen = options.some(function (value) { return isSameMouth(value, 25.4); }) ? 25.4 : options[0];\r\n        state.mouth = chosen;\r\n        mouthSelect.innerHTML = '';\r\n        options.forEach(function (value) {\r\n          var option = document.createElement('option');\r\n          option.value = String(value);\r\n          option.textContent = formatMouth(value);\r\n          mouthSelect.appendChild(option);\r\n        });\r\n        mouthSelect.value = String(chosen);\r\n        if (options.length > 1) {\r\n          mouthField.hidden = false;\r\n          mouthSelect.disabled = false;\r\n          mouthHelp.textContent = 'This diameter supports both 20 mm and 25.4 mm (1 inch) mouths.';\r\n        } else {\r\n          mouthField.hidden = true;\r\n          mouthSelect.disabled = true;\r\n          mouthHelp.textContent = 'Mouth is fixed at ' + formatMouth(chosen) + ' for this diameter.';\r\n        }\r\n      }\r\n      function formatRatio(value, total) {\r\n        if (value === null || !total) return '\u2014';\r\n        return Math.round((value \/ total) * 100) + '%';\r\n      }\r\n      function numericCompare(a, b) {\r\n        if (a === null) return 1;\r\n        if (b === null) return -1;\r\n        return a - b;\r\n      }\r\n      function uniqueSorted(list) {\r\n        var seen = {};\r\n        var out = [];\r\n        list.forEach(function (item) {\r\n          var key = String(item);\r\n          if (!seen[key]) { seen[key] = true; out.push(item); }\r\n        });\r\n        return out.sort(numericCompare);\r\n      }\r\n      function getDiameterOptions() { return uniqueSorted(canData.map(function (item) { return item.d; })); }\r\n      function getRowsForDiameter(d) { return canData.filter(function (item) { return item.d === Number(d); }).sort(function (a, b) { return a.h - b.h; }); }\r\n      function getHeightRange(d) {\r\n        var configured = heightRangeByDiameter[Number(d)];\r\n        if (configured) return { min: configured.min, max: configured.max };\r\n        var rows = getRowsForDiameter(d);\r\n        return { min: rows[0].h, max: rows[rows.length - 1].h };\r\n      }\r\n      function findNearestRow(diameter, heightValue) {\r\n        var rows = getRowsForDiameter(diameter);\r\n        var best = rows[0];\r\n        var bestDiff = Math.abs(rows[0].h - heightValue);\r\n        rows.forEach(function (row) {\r\n          var diff = Math.abs(row.h - heightValue);\r\n          if (diff < bestDiff) { best = row; bestDiff = diff; }\r\n        });\r\n        return best;\r\n      }\r\n      function getCurrentItem() {\r\n        var rawHeight = parseFloat($('accHeight').value);\r\n        if (isNaN(rawHeight)) rawHeight = state.heightInput;\r\n        var range = getHeightRange(state.diameter);\r\n        var clamped = Math.min(Math.max(rawHeight, range.min), range.max);\r\n        state.heightInput = clamped;\r\n        var matched = findNearestRow(state.diameter, clamped);\r\n        state.matchedHeight = matched.h;\r\n        return matched;\r\n      }\r\n\r\n      function interpolateMetric(diameter, height, key) {\r\n        var rows = getRowsForDiameter(diameter).filter(function (row) {\r\n          return row[key] !== null && typeof row[key] !== 'undefined';\r\n        }).sort(function (a, b) { return a.h - b.h; });\r\n        if (!rows.length) return null;\r\n        if (rows.length === 1) {\r\n          var reference = rows[0];\r\n          if (!reference.h) return Math.max(0, Math.round(reference[key]));\r\n          return Math.max(0, Math.round(reference[key] * (height \/ reference.h)));\r\n        }\r\n\r\n        function valueOnSegment(a, b) {\r\n          if (b.h === a.h) return a[key];\r\n          var ratio = (height - a.h) \/ (b.h - a.h);\r\n          return Math.max(0, Math.round(a[key] + (b[key] - a[key]) * ratio));\r\n        }\r\n\r\n        if (height <= rows[0].h) return valueOnSegment(rows[0], rows[1]);\r\n        if (height >= rows[rows.length - 1].h) return valueOnSegment(rows[rows.length - 2], rows[rows.length - 1]);\r\n\r\n        for (var i = 0; i < rows.length - 1; i += 1) {\r\n          var a = rows[i];\r\n          var b = rows[i + 1];\r\n          if (height >= a.h && height <= b.h) {\r\n            return valueOnSegment(a, b);\r\n          }\r\n        }\r\n        return Math.max(0, Math.round(rows[rows.length - 1][key]));\r\n      }\r\n\r\n      function getDynamicItem(referenceItem) {\r\n        var height = state.heightInput;\r\n        return {\r\n          no: referenceItem.no,\r\n          size: '\u03a6' + state.diameter + ' \u00d7 ' + formatNumber(height),\r\n          d: state.diameter,\r\n          h: height,\r\n          full: interpolateMetric(state.diameter, height, 'full'),\r\n          liquid: interpolateMetric(state.diameter, height, 'liquid'),\r\n          compressed: interpolateMetric(state.diameter, height, 'compressed'),\r\n          reference: referenceItem\r\n        };\r\n      }\r\n\r\n      function populateMainControls() {\r\n        var diameterSelect = $('accDiameter');\r\n        diameterSelect.innerHTML = '';\r\n        getDiameterOptions().forEach(function (value) {\r\n          var option = document.createElement('option');\r\n          option.value = value;\r\n          option.textContent = value;\r\n          diameterSelect.appendChild(option);\r\n        });\r\n        diameterSelect.value = String(DEFAULT_DIAMETER);\r\n        $('accMode').value = DEFAULT_MODE;\r\n        updateHeightRangeUI();\r\n        syncMouthControl();\r\n      }\r\n\r\n      function updateHeightRangeUI() {\r\n        var range = getHeightRange(state.diameter);\r\n        var heightInput = $('accHeight');\r\n        heightInput.min = range.min;\r\n        heightInput.max = range.max;\r\n        if (!heightInput.value) heightInput.value = state.heightInput;\r\n        if (Number(heightInput.value) < range.min) heightInput.value = range.min;\r\n        if (Number(heightInput.value) > range.max) heightInput.value = range.max;\r\n        $('accHeightRange').textContent = 'Range: ' + range.min + '\u2013' + range.max + ' mm';\r\n      }\r\n\r\n\r\n      function clampHeightToRange(value, showMessage) {\r\n        var range = getHeightRange(state.diameter);\r\n        if (isNaN(value)) return null;\r\n        var clamped = Math.min(Math.max(value, range.min), range.max);\r\n        if (Math.abs(clamped - value) > 0.001) {\r\n          state.heightInput = clamped;\r\n          $('accHeight').value = clamped;\r\n          if (showMessage) {\r\n            showWarning('For diameter ' + state.diameter + ' mm, height must be between ' + range.min + ' mm and ' + range.max + ' mm. The nearest valid value has been used.');\r\n          }\r\n          return clamped;\r\n        }\r\n        state.heightInput = value;\r\n        if (showMessage) hideWarning();\r\n        return value;\r\n      }\r\n\r\n      function validateHeight(showMessage) {\r\n        var input = parseFloat($('accHeight').value);\r\n        if (isNaN(input)) return true;\r\n        var clamped = clampHeightToRange(input, showMessage);\r\n        return clamped !== null && Math.abs(clamped - input) <= 0.001;\r\n      }\r\n\r\n      function renderCompatibleTable(item) {\r\n        var rows = getRowsForDiameter(state.diameter);\r\n        var tbody = $('accCompatibleRows');\r\n        tbody.innerHTML = '';\r\n        rows.forEach(function (row) {\r\n          var tr = document.createElement('tr');\r\n          var productUrl = getProductUrl(row);\r\n          tr.className = row.h === item.h ? 'is-active' : '';\r\n\r\n          var sizeTd = document.createElement('td');\r\n          if (productUrl) {\r\n            var link = document.createElement('a');\r\n            link.className = 'acc-size-link';\r\n            link.href = productUrl;\r\n            link.target = '_blank';\r\n            link.rel = 'nofollow noopener';\r\n            link.textContent = row.size;\r\n            link.title = 'View product page for ' + row.size;\r\n            link.addEventListener('click', function (event) {\r\n              event.stopPropagation();\r\n            });\r\n            sizeTd.appendChild(link);\r\n          } else {\r\n            sizeTd.textContent = row.size;\r\n          }\r\n\r\n          var fullTd = document.createElement('td');\r\n          fullTd.textContent = row.full;\r\n          var liquidTd = document.createElement('td');\r\n          liquidTd.textContent = row.liquid;\r\n          var compressedTd = document.createElement('td');\r\n          compressedTd.textContent = formatValue(row.compressed);\r\n\r\n          tr.appendChild(sizeTd);\r\n          tr.appendChild(fullTd);\r\n          tr.appendChild(liquidTd);\r\n          tr.appendChild(compressedTd);\r\n\r\n          tr.addEventListener('click', function () {\r\n            $('accHeight').value = row.h;\r\n            state.heightInput = row.h;\r\n            calculate();\r\n          });\r\n          tbody.appendChild(tr);\r\n        });\r\n        $('accTableTitle').textContent = 'Available sizes for \u03a6' + state.diameter + ' mm';\r\n        $('accTableCount').textContent = rows.length + ' sizes';\r\n      }\r\n\r\n      function displayModeValue(item) {\r\n        if (state.mode === 'Full Capacity') return item.full;\r\n        if (state.mode === 'Compressed Gas') return item.compressed;\r\n        return item.liquid;\r\n      }\r\n\r\n      function drawCan(item, fillRatio) {\r\n        var displayHeight = Math.max(item.h \/ DIAGRAM_SCALE, 1);\r\n        var displayDiameter = Math.max(item.d \/ DIAGRAM_SCALE, 1);\r\n        var mouthDiameter = state.mouth || getMouthOptionsForDiameter(item.d)[0];\r\n        var isWideMouth = isSameMouth(mouthDiameter, 25.4);\r\n\r\n        var bodyHalf = displayDiameter \/ 2;\r\n        var mouthHalf = isWideMouth ? Math.max(bodyHalf * 0.47, 6.6) : Math.max(bodyHalf * 0.34, 4.8);\r\n        mouthHalf = Math.min(mouthHalf, bodyHalf * 0.62);\r\n\r\n        var topSpace = 38;\r\n        var bottomSpace = 24;\r\n        var leftSpace = 36;\r\n        var rightSpace = 52;\r\n\r\n        var shoulderH = isWideMouth\r\n          ? Math.max(6.6, Math.min(bodyHalf * 0.98, 14.8))\r\n          : Math.max(8.4, Math.min(bodyHalf * 1.14, 17.4));\r\n        var domeH = Math.max(1.9, Math.min(bodyHalf * 0.24, 4.6));\r\n        var finishH = (isWideMouth\r\n          ? Math.max(4.6, Math.min(displayHeight * 0.045, 6.6))\r\n          : Math.max(4.9, Math.min(displayHeight * 0.05, 7.1))) * 0.5;\r\n        var rimPad = isWideMouth ? 1.9 : 1.25;\r\n        var rimH = (isWideMouth ? 2.9 : 2.5) * 0.5;\r\n\r\n        var viewW = leftSpace + displayDiameter + rightSpace;\r\n        var viewH = topSpace + displayHeight + bottomSpace;\r\n        var x = leftSpace + displayDiameter \/ 2;\r\n        var yTop = topSpace;\r\n        var yFinishTop = yTop - finishH;\r\n        var yBottom = yTop + displayHeight;\r\n        var yShoulderEnd = yTop + shoulderH;\r\n        var svg = $('accCanSvg');\r\n        svg.setAttribute('viewBox', '0 0 ' + viewW + ' ' + viewH);\r\n        svg.style.width = viewW + 'mm';\r\n        svg.style.height = viewH + 'mm';\r\n\r\n        var useShoulderTuck = !isWideMouth;\r\n        var shoulderRoundness = Math.max(0.70, Math.min(0.80, 0.70 + (bodyHalf - 9.5) * 0.012));\r\n        var shoulderBulge = isWideMouth\r\n          ? 0.28 + (shoulderRoundness - 0.70) * 0.70\r\n          : 0.34 + (shoulderRoundness - 0.70) * 0.75;\r\n        var shoulderLead = isWideMouth\r\n          ? 1.76 + (shoulderRoundness - 0.70) * 0.64\r\n          : 1.86 + (shoulderRoundness - 0.70) * 0.72;\r\n        var shoulderReach = Math.min(bodyHalf * 0.99, Math.max(mouthHalf * shoulderLead, mouthHalf + bodyHalf * shoulderBulge));\r\n        var leftShoulderCtrlX1 = x - shoulderReach;\r\n        var leftShoulderCtrlY1 = yTop + shoulderH * (isWideMouth ? 0.06 : 0.05);\r\n        var leftShoulderCtrlX2 = x - bodyHalf * 0.99;\r\n        var leftShoulderCtrlY2 = yTop + shoulderH * (isWideMouth ? 0.96 : 0.98);\r\n        var rightShoulderCtrlX1 = x + shoulderReach;\r\n        var rightShoulderCtrlY1 = leftShoulderCtrlY1;\r\n        var rightShoulderCtrlX2 = x + bodyHalf * 0.99;\r\n        var rightShoulderCtrlY2 = leftShoulderCtrlY2;\r\n\r\n        var fillPath;\r\n        var strokePath;\r\n        if (useShoulderTuck) {\r\n          var straightY = yTop + shoulderH * 0.22;\r\n          var leftBlendCtrlX1 = x - Math.min(bodyHalf * 0.72, mouthHalf + bodyHalf * 0.16);\r\n          var leftBlendCtrlY1 = yTop + shoulderH * 0.36;\r\n          var leftBlendCtrlX2 = x - bodyHalf * 0.995;\r\n          var leftBlendCtrlY2 = yTop + shoulderH * 0.74;\r\n          var rightBlendCtrlX1 = x + Math.min(bodyHalf * 0.72, mouthHalf + bodyHalf * 0.16);\r\n          var rightBlendCtrlY1 = leftBlendCtrlY1;\r\n          var rightBlendCtrlX2 = x + bodyHalf * 0.995;\r\n          var rightBlendCtrlY2 = leftBlendCtrlY2;\r\n\r\n          fillPath = [\r\n            'M', x - mouthHalf, yTop,\r\n            'L', x - mouthHalf, straightY,\r\n            'C', leftBlendCtrlX1, leftBlendCtrlY1, leftBlendCtrlX2, leftBlendCtrlY2, x - bodyHalf, yShoulderEnd,\r\n            'L', x - bodyHalf, yBottom - domeH,\r\n            'Q', x - bodyHalf, yBottom, x, yBottom,\r\n            'Q', x + bodyHalf, yBottom, x + bodyHalf, yBottom - domeH,\r\n            'L', x + bodyHalf, yShoulderEnd,\r\n            'C', rightBlendCtrlX2, rightBlendCtrlY2, rightBlendCtrlX1, rightBlendCtrlY1, x + mouthHalf, straightY,\r\n            'L', x + mouthHalf, yTop,\r\n            'Z'\r\n          ].join(' ');\r\n\r\n          strokePath = [\r\n            'M', x - mouthHalf, yTop,\r\n            'L', x - mouthHalf, straightY,\r\n            'C', leftBlendCtrlX1, leftBlendCtrlY1, leftBlendCtrlX2, leftBlendCtrlY2, x - bodyHalf, yShoulderEnd,\r\n            'L', x - bodyHalf, yBottom - domeH,\r\n            'Q', x - bodyHalf, yBottom, x, yBottom,\r\n            'Q', x + bodyHalf, yBottom, x + bodyHalf, yBottom - domeH,\r\n            'L', x + bodyHalf, yShoulderEnd,\r\n            'C', rightBlendCtrlX2, rightBlendCtrlY2, rightBlendCtrlX1, rightBlendCtrlY1, x + mouthHalf, straightY,\r\n            'L', x + mouthHalf, yTop\r\n          ].join(' ');\r\n        } else {\r\n          fillPath = [\r\n            'M', x - mouthHalf, yTop,\r\n            'C', leftShoulderCtrlX1, leftShoulderCtrlY1, leftShoulderCtrlX2, leftShoulderCtrlY2, x - bodyHalf, yShoulderEnd,\r\n            'L', x - bodyHalf, yBottom - domeH,\r\n            'Q', x - bodyHalf, yBottom, x, yBottom,\r\n            'Q', x + bodyHalf, yBottom, x + bodyHalf, yBottom - domeH,\r\n            'L', x + bodyHalf, yShoulderEnd,\r\n            'C', rightShoulderCtrlX2, rightShoulderCtrlY2, rightShoulderCtrlX1, rightShoulderCtrlY1, x + mouthHalf, yTop,\r\n            'Z'\r\n          ].join(' ');\r\n\r\n          strokePath = [\r\n            'M', x - mouthHalf, yTop,\r\n            'C', leftShoulderCtrlX1, leftShoulderCtrlY1, leftShoulderCtrlX2, leftShoulderCtrlY2, x - bodyHalf, yShoulderEnd,\r\n            'L', x - bodyHalf, yBottom - domeH,\r\n            'Q', x - bodyHalf, yBottom, x, yBottom,\r\n            'Q', x + bodyHalf, yBottom, x + bodyHalf, yBottom - domeH,\r\n            'L', x + bodyHalf, yShoulderEnd,\r\n            'C', rightShoulderCtrlX2, rightShoulderCtrlY2, rightShoulderCtrlX1, rightShoulderCtrlY1, x + mouthHalf, yTop\r\n          ].join(' ');\r\n        }\r\n\r\n        $('accCanFill').setAttribute('d', fillPath);\r\n        $('accCanStroke').setAttribute('d', strokePath);\r\n        $('accCanClipPath').setAttribute('d', fillPath);\r\n\r\n        var liquidY = yBottom - displayHeight * Math.max(0, Math.min(fillRatio, 0.98));\r\n        $('accLiquidRect').setAttribute('x', 0);\r\n        $('accLiquidRect').setAttribute('y', liquidY);\r\n        $('accLiquidRect').setAttribute('width', viewW);\r\n        $('accLiquidRect').setAttribute('height', yBottom - liquidY + 2);\r\n        setLine($('accLiquidLine'), x - bodyHalf + 1.2, liquidY, x + bodyHalf - 1.2, liquidY);\r\n\r\n        $('accCup').setAttribute('x', x);\r\n        $('accCup').setAttribute('y', yTop);\r\n        $('accCup').setAttribute('width', 0);\r\n        $('accCup').setAttribute('height', 0);\r\n        $('accCup').style.opacity = '0';\r\n\r\n        $('accValve').setAttribute('x', x - mouthHalf - rimPad);\r\n        $('accValve').setAttribute('y', yFinishTop);\r\n        $('accValve').setAttribute('width', mouthHalf * 2 + rimPad * 2);\r\n        $('accValve').setAttribute('height', finishH + rimH * 0.1);\r\n        $('accValve').setAttribute('rx', (finishH + rimH * 0.1) * 0.34);\r\n        $('accValve').style.opacity = '1';\r\n\r\n        setLine($('accStem'), x, yTop, x, yTop);\r\n        $('accStem').style.opacity = '0';\r\n\r\n        var mouthDimY = Math.max(6, yFinishTop - 10);\r\n        setLine($('accMouthLeftExt'), x - mouthHalf, yFinishTop + 0.8, x - mouthHalf, mouthDimY + 3.5);\r\n        setLine($('accMouthRightExt'), x + mouthHalf, yFinishTop + 0.8, x + mouthHalf, mouthDimY + 3.5);\r\n        setLine($('accMouthLine'), x - mouthHalf, mouthDimY, x + mouthHalf, mouthDimY);\r\n\r\n        var mouthText = $('accMouthText');\r\n        mouthText.textContent = '\u03a6' + getShortMouth(mouthDiameter) + ' Mouth';\r\n        mouthText.setAttribute('x', x);\r\n        mouthText.setAttribute('y', mouthDimY - 3.4);\r\n        mouthText.setAttribute('text-anchor', 'middle');\r\n\r\n        var mouthNote = $('accMouthNote');\r\n        mouthNote.textContent = '';\r\n        mouthNote.setAttribute('x', x);\r\n        mouthNote.setAttribute('y', mouthDimY - 3.4);\r\n        mouthNote.setAttribute('text-anchor', 'middle');\r\n\r\n        var canLabel = $('accCanLabel');\r\n        if (canLabel) {\r\n          var labelSize = Math.max(1.45, Math.min(2.15, bodyHalf * 0.16));\r\n          var labelWidth = Math.max(7.2, displayDiameter - 4.4);\r\n          canLabel.textContent = 'Ingredients';\r\n          canLabel.setAttribute('x', x);\r\n          canLabel.setAttribute('y', yBottom - Math.max(6.6, displayHeight * 0.105));\r\n          canLabel.setAttribute('text-anchor', 'middle');\r\n          canLabel.setAttribute('font-size', labelSize);\r\n          canLabel.setAttribute('textLength', labelWidth);\r\n          canLabel.setAttribute('lengthAdjust', 'spacingAndGlyphs');\r\n        }\r\n\r\n        var dimensionIds = [\r\n          'accHeightLine', 'accHeightTopTick', 'accHeightBottomTick', 'accHeightText',\r\n          'accDiameterLine', 'accDiameterLeftTick', 'accDiameterRightTick', 'accDiameterText'\r\n        ];\r\n        dimensionIds.forEach(function (id) {\r\n          var el = $(id);\r\n          if (el) el.style.display = 'block';\r\n        });\r\n\r\n        setLine($('accHeightLine'), x + bodyHalf + 8, yTop, x + bodyHalf + 8, yBottom);\r\n        setLine($('accHeightTopTick'), x + bodyHalf + 5, yTop, x + bodyHalf + 11, yTop);\r\n        setLine($('accHeightBottomTick'), x + bodyHalf + 5, yBottom, x + bodyHalf + 11, yBottom);\r\n        var heightText = $('accHeightText');\r\n        heightText.textContent = formatNumber(item.h) + ' mm';\r\n        heightText.setAttribute('x', x + bodyHalf + 15);\r\n        heightText.setAttribute('y', (yTop + yBottom) \/ 2);\r\n        heightText.setAttribute('transform', 'rotate(90 ' + (x + bodyHalf + 15) + ' ' + ((yTop + yBottom) \/ 2) + ')');\r\n        heightText.setAttribute('text-anchor', 'middle');\r\n\r\n        setLine($('accDiameterLine'), x - bodyHalf, yBottom + 6, x + bodyHalf, yBottom + 6);\r\n        setLine($('accDiameterLeftTick'), x - bodyHalf, yBottom + 3.5, x - bodyHalf, yBottom + 8.5);\r\n        setLine($('accDiameterRightTick'), x + bodyHalf, yBottom + 3.5, x + bodyHalf, yBottom + 8.5);\r\n        var diameterText = $('accDiameterText');\r\n        diameterText.textContent = '\u00d8' + formatNumber(item.d) + ' mm';\r\n        diameterText.setAttribute('x', x);\r\n        diameterText.setAttribute('y', yBottom + 14);\r\n        diameterText.setAttribute('text-anchor', 'middle');\r\n        diameterText.removeAttribute('transform');\r\n\r\n        $('accFillText').textContent = '';\r\n      }\r\n\r\n      function calculate() {\r\n        validateHeight(false);\r\n        var referenceItem = getCurrentItem();\r\n        var item = getDynamicItem(referenceItem);\r\n        var range = getHeightRange(state.diameter);\r\n        $('accHeight').value = state.heightInput;\r\n        if (state.heightInput < range.min) $('accHeight').value = range.min;\r\n        if (state.heightInput > range.max) $('accHeight').value = range.max;\r\n\r\n        $('accFullMl').textContent = formatNumber(item.full) + ' ml';\r\n        $('accFullUsOz').textContent = formatUsOz(item.full);\r\n        $('accFullUkOz').textContent = formatUkOz(item.full);\r\n        $('accLiquidMl').textContent = formatNumber(item.liquid) + ' ml';\r\n        $('accLiquidUsOz').textContent = formatUsOz(item.liquid);\r\n        $('accLiquidUkOz').textContent = formatUkOz(item.liquid);\r\n        $('accCompressedMl').textContent = item.compressed === null ? '\u2014' : formatNumber(item.compressed) + ' ml';\r\n        $('accCompressedUsOz').textContent = formatUsOz(item.compressed);\r\n        $('accCompressedUkOz').textContent = formatUkOz(item.compressed);\r\n\r\n        $('accStatusSize').textContent = item.size;\r\n        $('accStatusMouth').textContent = getShortMouth(state.mouth);\r\n        if ($('accStatusMode')) $('accStatusMode').textContent = state.mode;\r\n\r\n        var modeValue = displayModeValue(item);\r\n        var fillRatio = modeValue ? modeValue \/ item.full : item.liquid \/ item.full;\r\n        $('accStatusRatio').textContent = Math.round(fillRatio * 100) + '%';\r\n\r\n        renderProductLink(referenceItem, item);\r\n\r\n        if (state.mode === 'Compressed Gas' && item.compressed === null) {\r\n          showWarning('Compressed Gas capacity is not defined for ' + item.size + '. The preview is using the Liquid Gas fill level instead.');\r\n          fillRatio = item.liquid \/ item.full;\r\n        }\r\n\r\n        renderCompatibleTable(referenceItem);\r\n        drawCan(item, fillRatio);\r\n      }\r\n\r\n      function populateSelect(select, values, currentValue, formatter, allowDash) {\r\n        select.innerHTML = '';\r\n        if (!values.length && allowDash) {\r\n          var dashOption = document.createElement('option');\r\n          dashOption.value = '__dash__';\r\n          dashOption.textContent = '\u2014';\r\n          select.appendChild(dashOption);\r\n          select.value = '__dash__';\r\n          return null;\r\n        }\r\n        values.forEach(function (value) {\r\n          var option = document.createElement('option');\r\n          option.value = value === null ? '__dash__' : String(value);\r\n          option.textContent = formatter ? formatter(value) : String(value);\r\n          select.appendChild(option);\r\n        });\r\n        var chosen = values.indexOf(currentValue) >= 0 ? currentValue : values[0];\r\n        select.value = chosen === null ? '__dash__' : String(chosen);\r\n        return chosen;\r\n      }\r\n\r\n      function filterRows(excludeKey) {\r\n        return canData.filter(function (item) {\r\n          if (excludeKey !== 'diameter' && filterState.diameter !== null && item.d !== filterState.diameter) return false;\r\n          if (excludeKey !== 'height' && filterState.height !== null && item.h !== filterState.height) return false;\r\n          if (excludeKey !== 'liquid' && filterState.liquid !== null && item.liquid !== filterState.liquid) return false;\r\n          if (excludeKey !== 'compressed' && filterState.compressed !== undefined && filterState.compressed !== null && item.compressed !== filterState.compressed) return false;\r\n          if (excludeKey !== 'compressed' && filterState.compressed === null && $('accFilterCompressed').dataset.hasDash === 'true') {\r\n            if (item.compressed !== null) return false;\r\n          }\r\n          if (excludeKey !== 'full' && filterState.full !== null && item.full !== filterState.full) return false;\r\n          return true;\r\n        });\r\n      }\r\n\r\n      function updateFilterControls(changedKey) {\r\n        var diameterOptions = uniqueSorted(filterRows('diameter').map(function (item) { return item.d; }));\r\n        filterState.diameter = populateSelect($('accFilterDiameter'), diameterOptions, filterState.diameter, function (v) { return v + ' mm'; }, false);\r\n\r\n        var heightOptions = uniqueSorted(filterRows('height').map(function (item) { return item.h; }));\r\n        filterState.height = populateSelect($('accFilterHeight'), heightOptions, filterState.height, function (v) { return v + ' mm'; }, false);\r\n\r\n        var liquidOptions = uniqueSorted(filterRows('liquid').map(function (item) { return item.liquid; }));\r\n        filterState.liquid = populateSelect($('accFilterLiquid'), liquidOptions, filterState.liquid, function (v) { return v + ' ml'; }, false);\r\n\r\n        var compressedRows = filterRows('compressed');\r\n        var compressedOptions = uniqueSorted(compressedRows.map(function (item) { return item.compressed; }));\r\n        var compressedSelect = $('accFilterCompressed');\r\n        compressedSelect.dataset.hasDash = compressedOptions.indexOf(null) >= 0 ? 'true' : 'false';\r\n        filterState.compressed = populateSelect(compressedSelect, compressedOptions, filterState.compressed, function (v) { return v === null ? '\u2014' : v + ' ml'; }, true);\r\n\r\n        var fullOptions = uniqueSorted(filterRows('full').map(function (item) { return item.full; }));\r\n        filterState.full = populateSelect($('accFilterFull'), fullOptions, filterState.full, function (v) { return v + ' ml'; }, false);\r\n\r\n        renderFilterResults();\r\n      }\r\n\r\n      function getFilteredResultRows() {\r\n        return canData.filter(function (item) {\r\n          if (filterState.diameter !== null && item.d !== filterState.diameter) return false;\r\n          if (filterState.height !== null && item.h !== filterState.height) return false;\r\n          if (filterState.liquid !== null && item.liquid !== filterState.liquid) return false;\r\n          var compressedSelect = $('accFilterCompressed');\r\n          if (filterState.compressed === null && compressedSelect.dataset.hasDash === 'true') {\r\n            if (item.compressed !== null) return false;\r\n          } else if (filterState.compressed !== null && item.compressed !== filterState.compressed) {\r\n            return false;\r\n          }\r\n          if (filterState.full !== null && item.full !== filterState.full) return false;\r\n          return true;\r\n        });\r\n      }\r\n\r\n      function renderFilterResults() {\r\n        var rows = getFilteredResultRows();\r\n        var tbody = $('accFilterResults');\r\n        var empty = $('accFilterEmpty');\r\n        tbody.innerHTML = '';\r\n        if (!rows.length) {\r\n          empty.style.display = 'block';\r\n          return;\r\n        }\r\n        empty.style.display = 'none';\r\n        rows.forEach(function (item, index) {\r\n          var tr = document.createElement('tr');\r\n          if (index === 0) tr.className = 'is-highlight';\r\n          tr.innerHTML = '<td>' + item.size + '<\/td>' +\r\n            '<td>' + item.d + ' mm<\/td>' +\r\n            '<td>' + item.h + ' mm<\/td>' +\r\n            '<td>' + item.liquid + ' ml<\/td>' +\r\n            '<td>' + formatValue(item.compressed) + (item.compressed === null ? '' : ' ml') + '<\/td>' +\r\n            '<td style=\"text-align:right;\">' + item.full + ' ml<\/td>';\r\n          tr.addEventListener('click', function () {\r\n            state.diameter = item.d;\r\n            state.heightInput = item.h;\r\n            $('accDiameter').value = String(item.d);\r\n            updateHeightRangeUI();\r\n            syncMouthControl();\r\n            $('accHeight').value = item.h;\r\n            $('accMode').value = item.compressed !== null ? 'Compressed Gas' : 'Liquid Gas';\r\n            state.mode = $('accMode').value;\r\n            calculate();\r\n          });\r\n          tbody.appendChild(tr);\r\n        });\r\n      }\r\n\r\n      function initFilterRow() {\r\n        updateFilterControls();\r\n        ['Diameter', 'Height', 'Liquid', 'Compressed', 'Full'].forEach(function (key) {\r\n          var id = 'accFilter' + key;\r\n          $(id).addEventListener('change', function () {\r\n            var value = this.value;\r\n            var normalized;\r\n            if (value === '__dash__') {\r\n              normalized = null;\r\n            } else {\r\n              normalized = Number(value);\r\n            }\r\n            filterState[key.toLowerCase()] = normalized;\r\n            updateFilterControls(key.toLowerCase());\r\n          });\r\n        });\r\n      }\r\n\r\n      function markActionSelected(button) {\r\n        root.querySelectorAll('.acc-action-row button').forEach(function (item) {\r\n          item.classList.remove('is-selected');\r\n          item.classList.remove('acc-is-selected');\r\n          item.classList.remove('acc-button-selected');\r\n          item.setAttribute('aria-pressed', 'false');\r\n          item.style.setProperty('color', '#082a5e', 'important');\r\n          item.style.setProperty('-webkit-text-fill-color', '#082a5e', 'important');\r\n          item.style.setProperty('background', 'transparent', 'important');\r\n          item.style.setProperty('background-color', 'transparent', 'important');\r\n          item.style.setProperty('background-image', 'none', 'important');\r\n          item.style.setProperty('border-color', 'var(--sp-line)', 'important');\r\n          item.style.removeProperty('box-shadow');\r\n          item.style.removeProperty('transform');\r\n        });\r\n        if (button) {\r\n          button.classList.add('is-selected');\r\n          button.classList.add('acc-is-selected');\r\n          button.classList.add('acc-button-selected');\r\n          button.setAttribute('aria-pressed', 'true');\r\n          button.style.setProperty('color', '#082a5e', 'important');\r\n          button.style.setProperty('-webkit-text-fill-color', '#082a5e', 'important');\r\n          button.style.setProperty('background', 'transparent', 'important');\r\n          button.style.setProperty('background-color', 'transparent', 'important');\r\n          button.style.setProperty('background-image', 'none', 'important');\r\n          button.style.setProperty('border-color', 'var(--sp-line)', 'important');\r\n          button.style.removeProperty('box-shadow');\r\n          button.style.removeProperty('transform');\r\n        }\r\n      }\r\n\r\n      function copyText(text, successMessage) {\r\n        if (navigator.clipboard && navigator.clipboard.writeText) {\r\n          navigator.clipboard.writeText(text).then(function () { showToast(successMessage); }).catch(function () { showToast('Copy failed'); });\r\n        } else {\r\n          showToast('Copy not supported');\r\n        }\r\n      }\r\n\r\n      function copyResult() {\r\n        var referenceItem = getCurrentItem();\r\n        var item = getDynamicItem(referenceItem);\r\n        var text = 'Aerosol Can Capacity Result\\n' +\r\n          'Size: ' + item.size + '\\n' +\r\n          'Diameter: ' + item.d + ' mm\\n' +\r\n          'Mouth Diameter: ' + formatMouth(state.mouth) + '\\n' +\r\n          'Input Height: ' + formatNumber(state.heightInput) + ' mm\\n' +\r\n          'Reference Standard Size: ' + referenceItem.size + '\\n' +\r\n          'Full Capacity: ' + formatNumber(item.full) + ' mL \/ ' + formatUsOz(item.full) + ' US fl oz \/ ' + formatUkOz(item.full) + ' UK fl oz\\n' +\r\n          'Liquid Gas: ' + formatNumber(item.liquid) + ' mL \/ ' + formatUsOz(item.liquid) + ' US fl oz \/ ' + formatUkOz(item.liquid) + ' UK fl oz\\n' +\r\n          'Compressed Gas: ' + (item.compressed === null ? '\u2014' : formatNumber(item.compressed)) + ' mL \/ ' + formatUsOz(item.compressed) + ' US fl oz \/ ' + formatUkOz(item.compressed) + ' UK fl oz';\r\n        copyText(text, 'Result copied');\r\n      }\r\n\r\n      function copySizeTable() {\r\n        var header = 'No\\tSize (mm)\\tDiameter (mm)\\tHeight (mm)\\tFull Capacity (mL)\\tLiquid Gas (mL)\\tCompressed Gas (mL)';\r\n        var lines = canData.map(function (item) {\r\n          return [item.no, item.size, item.d, item.h, item.full, item.liquid, formatValue(item.compressed)].join('\\t');\r\n        });\r\n        copyText([header].concat(lines).join('\\n'), 'Size table copied');\r\n      }\r\n\r\n      function resetExample() {\r\n        state.diameter = DEFAULT_DIAMETER;\r\n        state.heightInput = DEFAULT_HEIGHT;\r\n        state.mode = DEFAULT_MODE;\r\n        state.mouth = DEFAULT_MOUTH;\r\n        $('accDiameter').value = String(DEFAULT_DIAMETER);\r\n        updateHeightRangeUI();\r\n        syncMouthControl();\r\n        $('accHeight').value = DEFAULT_HEIGHT;\r\n        $('accMode').value = DEFAULT_MODE;\r\n        calculate();\r\n      }\r\n\r\n      $('accDiameter').addEventListener('change', function () {\r\n        state.diameter = Number(this.value);\r\n        updateHeightRangeUI();\r\n        syncMouthControl();\r\n        validateHeight(true);\r\n        calculate();\r\n      });\r\n\r\n      $('accMouth').addEventListener('change', function () {\r\n        state.mouth = Number(this.value);\r\n        calculate();\r\n      });\r\n\r\n      $('accHeight').addEventListener('input', function () {\r\n        var raw = String(this.value).trim();\r\n        if (raw === '' || raw === '-' || raw === '.' || raw === '-.') return;\r\n        var value = parseFloat(raw);\r\n        if (isNaN(value)) return;\r\n\r\n        var range = getHeightRange(state.diameter);\r\n        var maxDigits = String(Math.floor(range.max)).length;\r\n        var numericChars = raw.replace(\/[^0-9]\/g, '');\r\n\r\n        \/*\r\n          Let users finish typing short intermediate values such as \"2\" -> \"20\" -> \"205\".\r\n          Once the entered number has enough digits for this diameter range, clamp immediately\r\n          if it is outside the allowed min\/max range.\r\n        *\/\r\n        if (value < range.min && numericChars.length < maxDigits) {\r\n          state.heightInput = value;\r\n          hideWarning();\r\n          return;\r\n        }\r\n\r\n        var clamped = clampHeightToRange(value, true);\r\n        if (clamped === null) return;\r\n        calculate();\r\n      });\r\n\r\n      $('accHeight').addEventListener('blur', function () {\r\n        var range = getHeightRange(state.diameter);\r\n        var value = parseFloat(this.value);\r\n        if (isNaN(value)) value = range.min;\r\n        clampHeightToRange(value, true);\r\n        calculate();\r\n      });\r\n\r\n      $('accMode').addEventListener('change', function () {\r\n        state.mode = this.value;\r\n        calculate();\r\n      });\r\n      function bindActionButton(id, handler) {\r\n        var button = $(id);\r\n        ['pointerdown', 'mousedown', 'touchstart', 'focus'].forEach(function (eventName) {\r\n          button.addEventListener(eventName, function () { markActionSelected(button); }, true);\r\n        });\r\n        button.addEventListener('click', function () {\r\n          markActionSelected(button);\r\n          handler();\r\n          requestAnimationFrame(function () { markActionSelected(button); });\r\n          setTimeout(function () { markActionSelected(button); }, 0);\r\n          setTimeout(function () { markActionSelected(button); }, 80);\r\n        });\r\n      }\r\n\r\n      bindActionButton('accCopy', copyResult);\r\n      bindActionButton('accReset', resetExample);\r\n      bindActionButton('accCopyTable', copySizeTable);\r\n\r\n      populateMainControls();\r\n      resetExample();\r\n    })();\r\n  <\/script>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Inicio \/ Centro de herramientas de embalaje Estimador de capacidad de latas de aerosol Calculadora de capacidad de latas de aerosol Utilice la tabla de tama\u00f1os de latas de aerosol de aluminio aprobada para comprobar la capacidad de llenado completo, la capacidad de llenado de gas l\u00edquido y la capacidad de llenado de gas comprimido. La altura utiliza el valor de entrada de forma din\u00e1mica dentro del rango de di\u00e1metro seleccionado, mientras que la tabla de tama\u00f1os est\u00e1ndar permanece disponible a continuaci\u00f3n. Ingredientes Tama\u00f1o seleccionado [\u2026]<\/p>","protected":false},"author":1,"featured_media":0,"parent":48526,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-48470","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.cnshining.com\/es\/wp-json\/wp\/v2\/pages\/48470","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cnshining.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.cnshining.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.cnshining.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cnshining.com\/es\/wp-json\/wp\/v2\/comments?post=48470"}],"version-history":[{"count":18,"href":"https:\/\/www.cnshining.com\/es\/wp-json\/wp\/v2\/pages\/48470\/revisions"}],"predecessor-version":[{"id":48588,"href":"https:\/\/www.cnshining.com\/es\/wp-json\/wp\/v2\/pages\/48470\/revisions\/48588"}],"up":[{"embeddable":true,"href":"https:\/\/www.cnshining.com\/es\/wp-json\/wp\/v2\/pages\/48526"}],"wp:attachment":[{"href":"https:\/\/www.cnshining.com\/es\/wp-json\/wp\/v2\/media?parent=48470"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}