{"id":48633,"date":"2026-06-02T09:15:05","date_gmt":"2026-06-02T09:15:05","guid":{"rendered":"https:\/\/www.cnshining.com\/?page_id=48633"},"modified":"2026-06-02T09:25:24","modified_gmt":"2026-06-02T09:25:24","slug":"calculadora-de-codigos-de-diametro-de-latas-de-metal","status":"publish","type":"page","link":"https:\/\/www.cnshining.com\/es\/centro-de-herramientas-de-embalaje\/calculadora-de-codigos-de-diametro-de-latas-de-metal","title":{"rendered":"Calculadora del di\u00e1metro de latas de metal"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"48633\" class=\"elementor elementor-48633\" 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-d7ae074 elementor-icon-list--layout-inline elementor-align-center elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list\" data-id=\"d7ae074\" 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 class=\"sp-mct-simple\" data-sp-mct-simple>\r\n  <style>\r\n    .sp-mct-simple {\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-soft-blue: #edf4ff;\r\n      --sp-silver: #eef3fa;\r\n      --sp-warning: #fff8eb;\r\n      --sp-warning-line: #f4c36a;\r\n      --sp-good: #0f8a5f;\r\n      --sp-shadow: 0 20px 48px rgba(8, 42, 94, .08);\r\n      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Arial, sans-serif;\r\n      color: var(--sp-text);\r\n      max-width: 1180px;\r\n      margin: 28px auto;\r\n      line-height: 1.55;\r\n      box-sizing: border-box;\r\n    }\r\n\r\n    .sp-mct-simple *,\r\n    .sp-mct-simple *::before,\r\n    .sp-mct-simple *::after { box-sizing: border-box; }\r\n\r\n    .sp-mct-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    }\r\n\r\n    .sp-mct-hero {\r\n      display: grid;\r\n      grid-template-columns: minmax(0, 1fr) minmax(380px, .98fr);\r\n      gap: clamp(28px, 5vw, 56px);\r\n      align-items: center;\r\n    }\r\n\r\n    .sp-mct-eyebrow {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      gap: 8px;\r\n      margin: 0 0 18px;\r\n      padding: 8px 14px;\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    .sp-mct-eyebrow::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    .sp-mct-title {\r\n      margin: 0 0 18px;\r\n      color: var(--sp-blue-dark);\r\n      font-size: clamp(38px, 5vw, 58px);\r\n      line-height: .98;\r\n      letter-spacing: -.05em;\r\n\r\n    }\r\n\r\n    .sp-mct-copy {\r\n      margin: 0 0 28px;\r\n      max-width: 680px;\r\n      color: var(--sp-muted);\r\n      font-size: clamp(16px, 2vw, 18px);\r\n    }\r\n\r\n    .sp-mct-feature-row {\r\n      display: grid;\r\n      grid-template-columns: repeat(3, minmax(0, 1fr));\r\n      gap: 14px;\r\n    }\r\n\r\n    .sp-mct-feature {\r\n      min-height: 112px;\r\n      border: 1px solid var(--sp-line);\r\n      border-radius: 18px;\r\n      background: #fff;\r\n      padding: 16px;\r\n    }\r\n\r\n    .sp-mct-feature strong {\r\n      display: block;\r\n      margin-bottom: 8px;\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    }\r\n\r\n    .sp-mct-feature span {\r\n      display: block;\r\n      color: var(--sp-muted);\r\n      font-size: 13px;\r\n    }\r\n\r\n\r\n\r\n    .sp-mct-principle {\r\n      max-width: 560px;\r\n      margin-top: 22px;\r\n      border: 1px solid rgba(19, 99, 223, .18);\r\n      border-radius: 20px;\r\n      background: rgba(255, 255, 255, .78);\r\n      padding: 18px;\r\n      box-shadow: 0 12px 30px rgba(22, 32, 51, .035);\r\n    }\r\n\r\n    .sp-mct-principle-title {\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 8px;\r\n      margin: 0 0 12px;\r\n      color: var(--sp-blue-dark);\r\n      font-size: 18px;\r\n      line-height: 1.2;\r\n      font-weight: 900;\r\n      letter-spacing: -.02em;\r\n    }\r\n\r\n    .sp-mct-principle-title::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, .10);\r\n      flex: 0 0 auto;\r\n    }\r\n\r\n    .sp-mct-principle-list {\r\n      display: grid;\r\n      gap: 10px;\r\n      margin: 0;\r\n      padding: 0;\r\n      list-style: none;\r\n    }\r\n\r\n    .sp-mct-principle-list li {\r\n      margin: 0;\r\n      color: var(--sp-muted);\r\n      font-size: 14px;\r\n      line-height: 1.45;\r\n    }\r\n\r\n    .sp-mct-principle-list strong {\r\n      color: var(--sp-blue-dark);\r\n      font-weight: 900;\r\n    }\r\n\r\n    .sp-mct-principle-example {\r\n      margin-top: 13px;\r\n      padding: 12px 14px;\r\n      border-radius: 14px;\r\n      background: var(--sp-soft-blue);\r\n      color: var(--sp-blue-dark);\r\n      font-size: 14px;\r\n      font-weight: 800;\r\n      line-height: 1.45;\r\n    }\r\n\r\n    .sp-mct-card {\r\n      position: relative;\r\n      width: 100%;\r\n      overflow: hidden;\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      padding: clamp(22px, 3vw, 30px);\r\n    }\r\n\r\n    .sp-mct-card::before {\r\n      content: \"\";\r\n      position: absolute;\r\n      inset: 0 0 auto;\r\n      height: 5px;\r\n      background: linear-gradient(90deg, var(--sp-blue), var(--sp-blue-dark));\r\n    }\r\n\r\n    .sp-mct-card-title {\r\n      margin: 0;\r\n      color: var(--sp-blue-dark);\r\n      font-size: 25px;\r\n      line-height: 1.1;\r\n      letter-spacing: -.03em;\r\n    }\r\n\r\n    .sp-mct-card-subtitle {\r\n      margin: 8px 0 18px;\r\n      color: var(--sp-muted);\r\n      font-size: 14px;\r\n    }\r\n\r\n    .sp-mct-field-grid {\r\n      display: grid;\r\n      grid-template-columns: 1fr;\r\n      gap: 14px;\r\n    }\r\n\r\n    .sp-mct-field {\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    }\r\n\r\n    .sp-mct-field.is-active,\r\n    .sp-mct-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    .sp-mct-label {\r\n      display: block;\r\n      margin-bottom: 8px;\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    .sp-mct-input-row {\r\n      display: grid;\r\n      grid-template-columns: minmax(0, 1fr) auto;\r\n      gap: 12px;\r\n      align-items: center;\r\n    }\r\n\r\n    .sp-mct-field input {\r\n      width: 100%;\r\n      min-width: 0;\r\n      border: 0 !important;\r\n      outline: 0 !important;\r\n      box-shadow: none !important;\r\n      background: transparent !important;\r\n      color: var(--sp-blue-dark) !important;\r\n      padding: 2px 0 !important;\r\n      margin: 0 !important;\r\n      line-height: 1.1;\r\n      font-size: clamp(24px, 4vw, 38px);\r\n      font-weight: 900;\r\n      letter-spacing: -.04em;\r\n      appearance: textfield;\r\n      -webkit-appearance: none;\r\n      border-radius: 0;\r\n    }\r\n\r\n    .sp-mct-field input::-webkit-outer-spin-button,\r\n    .sp-mct-field input::-webkit-inner-spin-button {\r\n      -webkit-appearance: none;\r\n      margin: 0;\r\n    }\r\n\r\n    .sp-mct-unit {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      min-width: 78px;\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-weight: 900;\r\n      white-space: nowrap;\r\n    }\r\n\r\n    .sp-mct-results {\r\n      display: grid;\r\n      grid-template-columns: 1fr;\r\n      gap: 12px;\r\n      margin-top: 16px;\r\n    }\r\n\r\n    .sp-mct-result {\r\n      border: 1px solid var(--sp-line);\r\n      border-radius: 18px;\r\n      background: #fff;\r\n      padding: 14px;\r\n    }\r\n\r\n    .sp-mct-result span {\r\n      display: block;\r\n      margin-bottom: 6px;\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: .05em;\r\n    }\r\n\r\n    .sp-mct-result strong {\r\n      display: block;\r\n      color: var(--sp-blue-dark);\r\n      font-size: clamp(21px, 3vw, 30px);\r\n      line-height: 1.08;\r\n      letter-spacing: -.04em;\r\n    }\r\n\r\n    .sp-mct-result em {\r\n      display: block;\r\n      margin-top: 6px;\r\n      color: var(--sp-muted);\r\n      font-size: 12px;\r\n      font-style: normal;\r\n    }\r\n\r\n    .sp-mct-warning {\r\n      margin-top: 14px;\r\n      padding: 14px 15px;\r\n      border: 1px solid var(--sp-warning-line);\r\n      border-radius: 16px;\r\n      background: var(--sp-warning);\r\n      color: #6a4a12;\r\n      font-size: 13px;\r\n    }\r\n\r\n    .sp-mct-actions {\r\n      display: grid;\r\n      grid-template-columns: 1fr 1fr 1fr;\r\n      gap: 10px;\r\n      margin-top: 16px;\r\n    }\r\n\r\n    .sp-mct-btn,\r\n    .sp-mct-chip {\r\n      cursor: pointer;\r\n      appearance: none;\r\n      -webkit-appearance: none;\r\n      font-family: inherit;\r\n    }\r\n\r\n    .sp-mct-btn {\r\n      border: 1px solid var(--sp-line) !important;\r\n      border-radius: 13px !important;\r\n      background: #fff !important;\r\n      color: var(--sp-blue-dark) !important;\r\n      padding: 12px 14px !important;\r\n      font-size: 14px !important;\r\n      font-weight: 800 !important;\r\n      line-height: 1.2 !important;\r\n      text-align: center !important;\r\n      transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;\r\n    }\r\n\r\n    .sp-mct-btn:hover,\r\n    .sp-mct-btn:focus-visible {\r\n      transform: translateY(-1px);\r\n      border-color: rgba(19, 99, 223, .4) !important;\r\n      background: #f7fbff !important;\r\n      box-shadow: 0 10px 24px rgba(22, 32, 51, .05);\r\n      outline: none;\r\n    }\r\n\r\n    .sp-mct-btn-primary {\r\n      border-color: transparent !important;\r\n      background: linear-gradient(135deg, var(--sp-blue), var(--sp-blue-dark)) !important;\r\n      color: #fff !important;\r\n      box-shadow: 0 12px 28px rgba(19, 99, 223, .18);\r\n    }\r\n\r\n    .sp-mct-btn-primary:hover,\r\n    .sp-mct-btn-primary:focus-visible {\r\n      background: linear-gradient(135deg, var(--sp-blue-dark), var(--sp-blue)) !important;\r\n      color: #fff !important;\r\n    }\r\n\r\n    .sp-mct-section { margin-top: 38px; }\r\n\r\n    .sp-mct-section h3 {\r\n      margin: 0 0 10px;\r\n      color: var(--sp-blue-dark);\r\n      font-size: clamp(24px, 3vw, 34px);\r\n      line-height: 1.15;\r\n      letter-spacing: -.04em;\r\n    }\r\n\r\n    .sp-mct-section p {\r\n      max-width: 900px;\r\n      margin: 0 0 18px;\r\n      color: var(--sp-muted);\r\n      font-size: 16px;\r\n    }\r\n\r\n    .sp-mct-quick-grid {\r\n      display: grid;\r\n      grid-template-columns: repeat(6, minmax(0, 1fr));\r\n      gap: 12px;\r\n    }\r\n\r\n    .sp-mct-chip {\r\n      width: 100%;\r\n      min-height: 88px;\r\n      border: 1px solid var(--sp-line) !important;\r\n      border-radius: 18px !important;\r\n      background: #fff !important;\r\n      color: var(--sp-blue-dark) !important;\r\n      padding: 14px 15px !important;\r\n      text-align: left !important;\r\n      overflow: hidden;\r\n      box-shadow: 0 10px 24px rgba(22, 32, 51, .04);\r\n      transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;\r\n    }\r\n\r\n    .sp-mct-chip:hover,\r\n    .sp-mct-chip:focus-visible {\r\n      transform: translateY(-2px);\r\n      border-color: rgba(19, 99, 223, .42) !important;\r\n      box-shadow: 0 14px 34px rgba(19, 99, 223, .10);\r\n      outline: none;\r\n    }\r\n\r\n    .sp-mct-chip.is-active {\r\n      border-color: transparent !important;\r\n      background: linear-gradient(135deg, var(--sp-blue), var(--sp-blue-dark)) !important;\r\n      box-shadow: 0 14px 34px rgba(19, 99, 223, .20);\r\n      color: #fff !important;\r\n    }\r\n\r\n    .sp-mct-chip strong {\r\n      display: block;\r\n      color: currentColor !important;\r\n      -webkit-text-fill-color: currentColor !important;\r\n      font-size: 18px;\r\n      line-height: 1.2;\r\n      letter-spacing: -.02em;\r\n      word-break: break-word;\r\n    }\r\n\r\n    .sp-mct-chip span {\r\n      display: block;\r\n      margin-top: 6px;\r\n      color: var(--sp-muted) !important;\r\n      -webkit-text-fill-color: var(--sp-muted) !important;\r\n      font-size: 12px;\r\n      line-height: 1.35;\r\n      word-break: break-word;\r\n    }\r\n\r\n    .sp-mct-chip.is-active span {\r\n      color: rgba(255, 255, 255, .86) !important;\r\n      -webkit-text-fill-color: rgba(255, 255, 255, .86) !important;\r\n    }\r\n\r\n    .sp-mct-panel {\r\n      background: #fff;\r\n      border: 1px solid var(--sp-line);\r\n      border-radius: 28px;\r\n      padding: clamp(18px, 2.6vw, 28px);\r\n      box-shadow: 0 14px 34px rgba(22, 32, 51, .05);\r\n    }\r\n\r\n    .sp-mct-table-wrap {\r\n      overflow-x: auto;\r\n      border: 1px solid var(--sp-line);\r\n      border-radius: 18px;\r\n      background: #fff;\r\n    }\r\n\r\n    .sp-mct-table {\r\n      width: 100%;\r\n      min-width: 680px;\r\n      border-collapse: collapse;\r\n    }\r\n\r\n    .sp-mct-table th,\r\n    .sp-mct-table td {\r\n      padding: 13px 15px;\r\n      border-bottom: 1px solid var(--sp-line);\r\n      text-align: left;\r\n      font-size: 14px;\r\n      vertical-align: top;\r\n    }\r\n\r\n    .sp-mct-table th {\r\n      background: #f1f5fb;\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: .05em;\r\n      white-space: nowrap;\r\n    }\r\n\r\n    .sp-mct-table tr:last-child td { border-bottom: 0; }\r\n\r\n    .sp-mct-table code {\r\n      display: inline-block;\r\n      padding: 3px 7px;\r\n      border-radius: 999px;\r\n      background: var(--sp-soft-blue);\r\n      color: var(--sp-blue-dark);\r\n      font-weight: 900;\r\n      font-size: 13px;\r\n    }\r\n\r\n    .sp-mct-badge {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      gap: 5px;\r\n      padding: 4px 8px;\r\n      border-radius: 999px;\r\n      background: var(--sp-silver);\r\n      color: var(--sp-blue-dark);\r\n      font-size: 12px;\r\n      font-weight: 850;\r\n      white-space: nowrap;\r\n    }\r\n\r\n    .sp-mct-badge.is-good {\r\n      background: #eaf8f2;\r\n      color: var(--sp-good);\r\n    }\r\n\r\n    .sp-mct-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    .sp-mct-toast.is-visible {\r\n      opacity: 1;\r\n      transform: translateY(0);\r\n    }\r\n\r\n    @media (max-width: 1080px) {\r\n      .sp-mct-quick-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }\r\n    }\r\n\r\n    @media (max-width: 920px) {\r\n      .sp-mct-hero { grid-template-columns: 1fr; }\r\n      .sp-mct-feature-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }\r\n      .sp-mct-quick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }\r\n    }\r\n\r\n    @media (max-width: 720px) {\r\n      .sp-mct-actions,\r\n      .sp-mct-results { grid-template-columns: 1fr; }\r\n      .sp-mct-title { font-size: 38px; }\r\n    }\r\n\r\n    @media (max-width: 620px) {\r\n      .sp-mct-shell { padding: 22px 16px; }\r\n      .sp-mct-feature-row,\r\n      .sp-mct-quick-grid { grid-template-columns: 1fr; }\r\n      .sp-mct-btn { width: 100%; }\r\n      .sp-mct-unit { min-width: 70px; }\r\n    }\r\n\r\n    .sp-mct-simple .sp-mct-chip,\r\n    .sp-mct-simple .sp-mct-chip strong,\r\n    .sp-mct-simple .sp-mct-chip span,\r\n    .sp-mct-simple .sp-mct-unit,\r\n    .sp-mct-simple .sp-mct-table td { text-transform: none !important; }\r\n  <\/style>\r\n\r\n  <div class=\"sp-mct-shell\">\r\n    <div class=\"sp-mct-hero\">\r\n      <div class=\"sp-mct-intro\">\r\n        <span class=\"sp-mct-eyebrow\">Herramienta de unidad Shining Packaging<\/span>\r\n        <h2 class=\"sp-mct-title\">Calculadora del di\u00e1metro de latas de metal<\/h2>\r\n        <p class=\"sp-mct-copy\">\r\n          Introduzca un c\u00f3digo, un valor decimal en pulgadas o un valor en mil\u00edmetros. Los campos de c\u00f3digo, pulgadas y mil\u00edmetros se actualizan autom\u00e1ticamente en tiempo real.\r\n        <\/p>\r\n\r\n        <div class=\"sp-mct-principle\" aria-label=\"Principio de c\u00e1lculo\">\r\n          <h3 class=\"sp-mct-principle-title\">Principio de c\u00e1lculo<\/h3>\r\n          <ul class=\"sp-mct-principle-list\">\r\n            <li><strong>C\u00f3digo:<\/strong> El primer d\u00edgito representa el valor en pulgadas enteras; los dos \u00faltimos d\u00edgitos representan dieciseisavos de pulgada.<\/li>\r\n            <li><strong>Pulgadas:<\/strong> El c\u00f3digo se convierte en un valor decimal en pulgadas.<\/li>\r\n            <li><strong>Mil\u00edmetros:<\/strong> El valor en pulgadas decimales se convierte a mil\u00edmetros.<\/li>\r\n          <\/ul>\r\n          <div class=\"sp-mct-principle-example\">Ejemplo: 202 \u2192 2 + 2\/16 pulg \u2192 2,125 pulg \u2192 53,97 mm<\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"sp-mct-card\" aria-labelledby=\"sp-mct-title\">\r\n        <h3 id=\"sp-mct-title\" class=\"sp-mct-card-title\">C\u00f3digo \/ Pulgadas \/ mm Entrada<\/h3>\r\n        <p class=\"sp-mct-card-subtitle\">Escribe en cualquier campo; los dem\u00e1s campos se actualizan autom\u00e1ticamente.<\/p>\r\n\r\n        <div class=\"sp-mct-field-grid\">\r\n          <div class=\"sp-mct-field\" data-field-wrap=\"code\">\r\n            <label class=\"sp-mct-label\" for=\"sp-mct-code-input\">C\u00f3digo<\/label>\r\n            <div class=\"sp-mct-input-row\">\r\n              <input id=\"sp-mct-code-input\" data-code-input type=\"text\" inputmode=\"text\" autocomplete=\"off\" placeholder=\"202, 211 o 300\" aria-label=\"C\u00f3digo de tama\u00f1o\">\r\n              <span class=\"sp-mct-unit\">C\u00f3digo<\/span>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"sp-mct-field\" data-field-wrap=\"inch\">\r\n            <label class=\"sp-mct-label\" for=\"sp-mct-inch-input\">Pulgadas<\/label>\r\n            <div class=\"sp-mct-input-row\">\r\n              <input id=\"sp-mct-inch-input\" data-inch-input type=\"text\" inputmode=\"decimal\" autocomplete=\"off\" placeholder=\"2.125\" aria-label=\"pulgadas decimales\">\r\n              <span class=\"sp-mct-unit\">en<\/span>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"sp-mct-field\" data-field-wrap=\"mm\">\r\n            <label class=\"sp-mct-label\" for=\"sp-mct-mm-input\">mil\u00edmetros<\/label>\r\n            <div class=\"sp-mct-input-row\">\r\n              <input id=\"sp-mct-mm-input\" data-mm-input type=\"text\" inputmode=\"decimal\" autocomplete=\"off\" placeholder=\"53.98\" aria-label=\"mil\u00edmetros\">\r\n              <span class=\"sp-mct-unit\">mm<\/span>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"sp-mct-results\" aria-label=\"Resultados de la b\u00fasqueda\">\r\n          <div class=\"sp-mct-result\">\r\n            <span>Referencia com\u00fan en mm<\/span>\r\n            <strong data-practical-mm>\u2014<\/strong>\r\n          <\/div>\r\n        <\/div>\r\n<div class=\"sp-mct-warning\">\r\n          La entrada en mm utiliza el valor nominal para la sincronizaci\u00f3n. Las referencias comunes en mm pueden diferir del valor nominal. Confirme las dimensiones finales con el plano del proveedor antes de la producci\u00f3n, el utillaje o la configuraci\u00f3n de la l\u00ednea de llenado.\r\n        <\/div>\r\n\r\n        <div class=\"sp-mct-actions\">\r\n          <button class=\"sp-mct-btn sp-mct-btn-primary\" type=\"button\" data-copy-all>Copiar resultados<\/button>\r\n          <button class=\"sp-mct-btn\" type=\"button\" data-reset>Restablecer a 202<\/button>\r\n          <button class=\"sp-mct-btn\" type=\"button\" data-clear>Claro<\/button>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"sp-mct-section\">\r\n    <h3>Tabla de conversi\u00f3n r\u00e1pida<\/h3>\r\n    <p>Haz clic en un c\u00f3digo para cargar sus valores.<\/p>\r\n    <div class=\"sp-mct-quick-grid\" data-quick-grid><\/div>\r\n  <\/div>\r\n\r\n  <div class=\"sp-mct-section\">\r\n    <div class=\"sp-mct-panel\">\r\n      <h3>Tabla de conversi\u00f3n de dimensiones de latas<\/h3>\r\n\r\n      <div class=\"sp-mct-table-wrap\">\r\n        <table class=\"sp-mct-table\">\r\n          <thead>\r\n            <tr>\r\n              <th>C\u00f3digo<\/th>\r\n              <th>Pulgadas<\/th>\r\n              <th>mm<\/th>\r\n              <th>Referencia com\u00fan en mm<\/th>\r\n            <\/tr>\r\n          <\/thead>\r\n          <tbody data-chart-body><\/tbody>\r\n        <\/table>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"sp-mct-toast\" data-toast role=\"status\" aria-live=\"polite\">Copiado<\/div>\r\n\r\n  <script>\r\n    (function () {\r\n      const root = document.currentScript.closest('[data-sp-mct-simple]');\r\n      if (!root || root.dataset.spMctSimpleReady === 'true') return;\r\n      root.dataset.spMctSimpleReady = 'true';\r\n\r\n      const commonReferences = {\r\n        '112': '45 mm',\r\n        '115': '49 mm',\r\n        '200': '50\u201350.8 mm',\r\n        '202': '52 \/ 52.4\u201352.5 \/ 53.3\u201353.4 mm',\r\n        '204': '57.4 mm',\r\n        '205': '57 mm',\r\n        '206': '60.3 mm',\r\n        '209': '65.1 mm',\r\n        '211': '65 \/ 66.1\u201366.2 mm',\r\n        '214': '70 mm',\r\n        '215': '74.6 mm',\r\n        '300': '73 \/ 76.2 mm',\r\n        '301': '77.8 mm',\r\n        '303': '81.0 mm',\r\n        '307': '87.3 mm',\r\n        '315': '100.0 mm',\r\n        '401': '104.8 mm',\r\n        '404': '111.1 mm',\r\n        '502': '132.6 mm',\r\n        '603': '159.5 mm'\r\n      };\r\n\r\n      const tableCodes = [\r\n        '112', '115', '200', '202', '204', '205', '206', '209', '211', '214', '215',\r\n        '300', '301', '303', '307', '315', '401', '404', '502', '603'\r\n      ];\r\n\r\n      const quickItems = [\r\n        '112', '115', '200', '202', '204', '205', '206', '209', '211', '214', '215',\r\n        '300', '301', '303', '307', '315', '401', '404', '502', '603'\r\n      ];\r\n\r\n      const codeInput = root.querySelector('[data-code-input]');\r\n      const inchInput = root.querySelector('[data-inch-input]');\r\n      const mmInput = root.querySelector('[data-mm-input]');\r\n      const practicalMm = root.querySelector('[data-practical-mm]');\r\n      const quickGrid = root.querySelector('[data-quick-grid]');\r\n      const chartBody = root.querySelector('[data-chart-body]');\r\n      const toast = root.querySelector('[data-toast]');\r\n\r\n      let activeChip = null;\r\n      let toastTimer = null;\r\n      let isSyncing = false;\r\n\r\n      function cleanCode(value) {\r\n        return String(value || '')\r\n          .trim()\r\n          .replace(\/[\u00d7\uff0a*]\/g, 'x')\r\n          .replace(\/\\s+\/g, ' ')\r\n          .toUpperCase();\r\n      }\r\n\r\n      function parseUserNumber(value) {\r\n        const cleaned = String(value || '').replace(\/,\/g, '').trim();\r\n        if (cleaned === '' || cleaned === '-' || cleaned === '.' || cleaned === '-.') return NaN;\r\n        return Number(cleaned);\r\n      }\r\n\r\n      function parseSingleCode(value) {\r\n        const match = String(value || '').trim().match(\/^(\\d)(\\d{2})$\/);\r\n        if (!match) return null;\r\n        const inchesWhole = Number(match[1]);\r\n        const sixteenths = Number(match[2]);\r\n        if (!Number.isFinite(inchesWhole) || !Number.isFinite(sixteenths) || sixteenths > 15) return null;\r\n        const inches = inchesWhole + sixteenths \/ 16;\r\n        return {\r\n          code: match[1] + match[2],\r\n          inches: inches,\r\n          mm: inches * 25.4\r\n        };\r\n      }\r\n\r\n      function parseCodeInput(value) {\r\n        const cleaned = cleanCode(value);\r\n        if (!cleaned) return null;\r\n        const match = cleaned.match(\/\\d{3}\/);\r\n        if (!match) return null;\r\n        const diameter = parseSingleCode(match[0]);\r\n        if (!diameter) return null;\r\n        return { raw: cleaned, diameter: diameter };\r\n      }\r\n\r\n      function codeFromInches(inches) {\r\n        if (!Number.isFinite(inches) || inches < 0) return null;\r\n        let whole = Math.floor(inches);\r\n        let sixteenths = Math.round((inches - whole) * 16);\r\n        if (sixteenths >= 16) {\r\n          whole += 1;\r\n          sixteenths = 0;\r\n        }\r\n        if (whole < 0 || whole > 9) return null;\r\n        const code = String(whole) + String(sixteenths).padStart(2, '0');\r\n        return parseSingleCode(code);\r\n      }\r\n\r\n      function formatNumber(value, decimals) {\r\n        if (!Number.isFinite(value)) return '';\r\n        return value.toFixed(decimals).replace(\/\\.?0+$\/, '') || '0';\r\n      }\r\n\r\n      function getCommon(code) {\r\n        return commonReferences[code] || '\u2014';\r\n      }\r\n\r\n      function setFieldActive(name) {\r\n        root.querySelectorAll('[data-field-wrap]').forEach(function (field) {\r\n          field.classList.toggle('is-active', field.getAttribute('data-field-wrap') === name);\r\n        });\r\n      }\r\n\r\n      function setActiveChip(button) {\r\n        if (activeChip) activeChip.classList.remove('is-active');\r\n        activeChip = button || null;\r\n        if (activeChip) activeChip.classList.add('is-active');\r\n      }\r\n      function setEmptyState(message) {\r\n        practicalMm.textContent = '\u2014';\r\n      }\r\n      function renderResult(parsed, sourceLabel) {\r\n        const code = parsed.diameter.code;\r\n        const common = getCommon(code);\r\n        practicalMm.textContent = common;\r\n      }\r\n\r\n      function syncFromCode() {\r\n        if (isSyncing) return;\r\n        isSyncing = true;\r\n        setFieldActive('code');\r\n        const parsed = parseCodeInput(codeInput.value);\r\n        if (!parsed) {\r\n          inchInput.value = '';\r\n          mmInput.value = '';\r\n          setEmptyState('Enter a valid 3-digit code such as <strong>202<\/strong>, <strong>211<\/strong>, or <strong>300<\/strong>.');\r\n          isSyncing = false;\r\n          return;\r\n        }\r\n        inchInput.value = formatNumber(parsed.diameter.inches, 4);\r\n        mmInput.value = formatNumber(parsed.diameter.mm, 2);\r\n        renderResult(parsed, 'Code input');\r\n        isSyncing = false;\r\n      }\r\n\r\n      function syncFromInch() {\r\n        if (isSyncing) return;\r\n        isSyncing = true;\r\n        setFieldActive('inch');\r\n        const inches = parseUserNumber(inchInput.value);\r\n        if (!Number.isFinite(inches)) {\r\n          codeInput.value = '';\r\n          mmInput.value = '';\r\n          setEmptyState('Enter a decimal inch value such as <strong>2.125<\/strong> or <strong>3.0625<\/strong>.');\r\n          isSyncing = false;\r\n          return;\r\n        }\r\n        const parsedCode = codeFromInches(inches);\r\n        if (!parsedCode) {\r\n          codeInput.value = '';\r\n          mmInput.value = formatNumber(inches * 25.4, 2);\r\n          setEmptyState('The inch value is outside the supported 3-digit code range.');\r\n          isSyncing = false;\r\n          return;\r\n        }\r\n        codeInput.value = parsedCode.code;\r\n        mmInput.value = formatNumber(inches * 25.4, 2);\r\n        renderResult({ raw: parsedCode.code, diameter: parsedCode }, 'Inch input');\r\n        isSyncing = false;\r\n      }\r\n\r\n      function syncFromMm() {\r\n        if (isSyncing) return;\r\n        isSyncing = true;\r\n        setFieldActive('mm');\r\n        const mm = parseUserNumber(mmInput.value);\r\n        if (!Number.isFinite(mm)) {\r\n          codeInput.value = '';\r\n          inchInput.value = '';\r\n          setEmptyState('Enter a millimeter value such as <strong>52<\/strong>, <strong>65<\/strong>, or <strong>77.8<\/strong>.');\r\n          isSyncing = false;\r\n          return;\r\n        }\r\n        const inches = mm \/ 25.4;\r\n        const parsedCode = codeFromInches(inches);\r\n        if (!parsedCode) {\r\n          codeInput.value = '';\r\n          inchInput.value = formatNumber(inches, 4);\r\n          setEmptyState('The mm value is outside the supported 3-digit code range.');\r\n          isSyncing = false;\r\n          return;\r\n        }\r\n        codeInput.value = parsedCode.code;\r\n        inchInput.value = formatNumber(inches, 4);\r\n        renderResult({ raw: parsedCode.code, diameter: parsedCode }, 'mm input');\r\n        isSyncing = false;\r\n      }\r\n\r\n      function renderQuickValues() {\r\n        quickGrid.innerHTML = '';\r\n        quickItems.forEach(function (item) {\r\n          const parsed = parseCodeInput(item);\r\n          const code = parsed ? parsed.diameter.code : item;\r\n          const button = document.createElement('button');\r\n          button.type = 'button';\r\n          button.className = 'sp-mct-chip';\r\n          if (parsed) {\r\n            button.innerHTML = '<strong>' + item + '<\/strong><span>' + formatNumber(parsed.diameter.inches, 4) + ' in \u00b7 ' + formatNumber(parsed.diameter.mm, 2) + ' mm<\/span>';\r\n          } else {\r\n            button.innerHTML = '<strong>' + item + '<\/strong><span>' + getCommon(code) + '<\/span>';\r\n          }\r\n          button.addEventListener('click', function () {\r\n            codeInput.value = item;\r\n            setActiveChip(button);\r\n            syncFromCode();\r\n            const card = root.querySelector('.sp-mct-card');\r\n            if (card) card.scrollIntoView({ behavior: 'smooth', block: 'center' });\r\n          });\r\n          quickGrid.appendChild(button);\r\n        });\r\n      }\r\n\r\n      function renderTable() {\r\n        chartBody.innerHTML = '';\r\n        tableCodes.forEach(function (code) {\r\n          const parsed = parseSingleCode(code);\r\n          if (!parsed) return;\r\n          const row = document.createElement('tr');\r\n          const common = getCommon(code);\r\n          row.innerHTML =\r\n            '<td><code>' + code + '<\/code><\/td>' +\r\n            '<td>' + formatNumber(parsed.inches, 4) + ' in<\/td>' +\r\n            '<td>' + formatNumber(parsed.mm, 2) + ' mm<\/td>' +\r\n            '<td><strong>' + common + '<\/strong><\/td>';\r\n          chartBody.appendChild(row);\r\n        });\r\n      }\r\n\r\n      function showToast(message) {\r\n        if (!toast) return;\r\n        toast.textContent = message;\r\n        toast.classList.add('is-visible');\r\n        clearTimeout(toastTimer);\r\n        toastTimer = setTimeout(function () {\r\n          toast.classList.remove('is-visible');\r\n        }, 1400);\r\n      }\r\n\r\n      async function copyResults() {\r\n        const parsed = parseCodeInput(codeInput.value);\r\n        const inchValue = parseUserNumber(inchInput.value);\r\n        const mmValue = parseUserNumber(mmInput.value);\r\n        if (!parsed || !Number.isFinite(inchValue) || !Number.isFinite(mmValue)) {\r\n          showToast('Nothing to copy');\r\n          return;\r\n        }\r\n        const code = parsed.diameter.code;\r\n        const lines = [\r\n          'Metal Can \/ Tin Code Values',\r\n          'Code: ' + codeInput.value,\r\n          'Inches: ' + formatNumber(inchValue, 4) + ' in',\r\n          'mm: ' + formatNumber(mmValue, 2) + ' mm',\r\n          'Common mm reference: ' + getCommon(code)\r\n        ];\r\n\r\n        try {\r\n          await navigator.clipboard.writeText(lines.join('\\n'));\r\n          showToast('Results copied');\r\n        } catch (error) {\r\n          showToast('Copy failed');\r\n        }\r\n      }\r\n\r\n      function resetTool() {\r\n        codeInput.value = '202';\r\n        const target = Array.from(quickGrid.querySelectorAll('.sp-mct-chip')).find(function (button) {\r\n          return button.querySelector('strong') && button.querySelector('strong').textContent === '202';\r\n        });\r\n        setActiveChip(target || null);\r\n        syncFromCode();\r\n      }\r\n\r\n      function clearTool() {\r\n        isSyncing = true;\r\n        codeInput.value = '';\r\n        inchInput.value = '';\r\n        mmInput.value = '';\r\n        isSyncing = false;\r\n        setActiveChip(null);\r\n        setFieldActive('');\r\n        setEmptyState();\r\n        codeInput.focus();\r\n      }\r\n\r\n      codeInput.addEventListener('input', function () {\r\n        setActiveChip(null);\r\n        syncFromCode();\r\n      });\r\n      inchInput.addEventListener('input', function () {\r\n        setActiveChip(null);\r\n        syncFromInch();\r\n      });\r\n      mmInput.addEventListener('input', function () {\r\n        setActiveChip(null);\r\n        syncFromMm();\r\n      });\r\n      root.querySelector('[data-copy-all]').addEventListener('click', copyResults);\r\n      root.querySelector('[data-reset]').addEventListener('click', resetTool);\r\n      root.querySelector('[data-clear]').addEventListener('click', clearTool);\r\n\r\n      renderQuickValues();\r\n      renderTable();\r\n      resetTool();\r\n    })();\r\n  <\/script>\r\n\r\n  <script type=\"application\/ld+json\">{\n    \"@context\": \"https:\\\/\\\/schema.org\",\n    \"@type\": \"WebApplication\",\n    \"name\": \"Metal Can and Tin Code Inch Millimeter Input Tool\",\n    \"applicationCategory\": \"CalculatorApplication\",\n    \"operatingSystem\": \"Any\",\n    \"description\": \"A metal container size code tool where code, decimal inch, and millimeter fields are all editable inputs.\",\n    \"offers\": {\n        \"@type\": \"Offer\",\n        \"price\": \"0\",\n        \"priceCurrency\": \"USD\"\n    }\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 Herramienta unitaria Shining Packaging Calculadora de di\u00e1metro de latas de metal Ingrese un c\u00f3digo, un valor en pulgadas decimales o un valor en mil\u00edmetros. Los campos de c\u00f3digo, pulgadas y mil\u00edmetros se actualizan en tiempo real. Principio de c\u00e1lculo C\u00f3digo: el primer d\u00edgito es el valor en pulgadas enteras; los dos \u00faltimos d\u00edgitos son dieciseisavos de pulgada. Pulgadas: el [\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-48633","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.cnshining.com\/es\/wp-json\/wp\/v2\/pages\/48633","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=48633"}],"version-history":[{"count":0,"href":"https:\/\/www.cnshining.com\/es\/wp-json\/wp\/v2\/pages\/48633\/revisions"}],"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=48633"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}