/* Shared refinements for the six calculator flows, preserving their OC icons. */
body[data-oc-system] {
  --oc-font-body: Arial, Helvetica, sans-serif;
  --oc-control-purple: #4b184f;
  --oc-control-border: #e8e2ea;
  --oc-nav-circle: 64px;
  --oc-nav-gap: 28px;
  --oc-nav-caption: 92px;
}
body[data-oc-system] nav:is(.floating-navigation, .floating-menu) {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--oc-nav-gap);
  width: max-content;
  max-width: calc(100vw - 16px);
  padding: 12px 24px 46px;
  border-radius: 34px;
}
body[data-oc-system] :is(.floating-navigation-button, .floating-menu__action, .floating-action) {
  position: relative;
  width: var(--oc-nav-circle);
  height: var(--oc-nav-circle);
  flex: 0 0 var(--oc-nav-circle);
  overflow: visible;
}
body[data-oc-system] :is(.floating-navigation-button, .floating-menu__action, .floating-action) > span:not([aria-hidden='true']) {
  position: absolute;
  top: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%);
  width: var(--oc-nav-caption);
  height: auto;
  clip: auto;
  clip-path: none;
  overflow: visible;
  white-space: normal;
  color: var(--oc-control-purple);
  font: 600 14px/1.2 var(--oc-font-body);
  text-align: center;
}
body[data-oc-system] :is(div.floating-navigation, .floating-menu-shell) {
  width: max-content;
  max-width: calc(100vw - 16px);
}
body[data-oc-system] main > nav.floating-menu {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}
body[data-oc-system] :is(nav.floating-navigation, main > nav.floating-menu, div.floating-navigation, .floating-menu-shell) {
  bottom: max(10px, calc(env(safe-area-inset-bottom) + 8px));
}
body[data-oc-system]:not([data-oc-system='inicio']) .page { padding-bottom: calc(180px + env(safe-area-inset-bottom)); }
body[data-oc-system] input[placeholder='0']::placeholder { color: #938b98; opacity: .7; }
body[data-oc-system] input[placeholder='0']:focus::placeholder { color: transparent; }

body[data-oc-system] .oc-number-stepper {
  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--oc-control-border);
  border-radius: 14px;
  background: rgba(255,255,255,.85);
  color: var(--oc-control-purple);
  font-family: var(--oc-font-body);
  letter-spacing: 0;
  text-transform: none;
}
body[data-oc-system] .oc-number-stepper button {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--oc-control-purple);
  font: 500 24px/1 var(--oc-font-body);
  touch-action: manipulation;
}
body[data-oc-system] .oc-number-stepper button:hover { background: #f8ebf9; }
body[data-oc-system] .oc-number-stepper button:disabled { opacity: .35; cursor: default; }
body[data-oc-system] .oc-number-stepper input {
  flex: 1 1 54px;
  width: 54px;
  min-width: 0;
  min-height: 44px;
  padding: 8px 2px;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: var(--oc-control-purple);
  font: 700 16px/1.3 var(--oc-font-body);
  text-align: center;
}
body[data-oc-system] .oc-number-stepper em { padding: 0 8px 0 2px; font: 600 14px var(--oc-font-body); }
body[data-oc-system] .oc-number-stepper :is(button, input):focus-visible { outline: 2px solid #82518e; outline-offset: -3px; border-radius: 10px; }
body[data-oc-system] .oc-number-stepper:has([aria-invalid='true']) { border-color: #b44040; }
body[data-oc-system] .workday-control .oc-number-stepper { width: 100%; }

@media (max-width: 640px) {
  body[data-oc-system] { --oc-nav-circle: 48px; --oc-nav-gap: 26px; --oc-nav-caption: 74px; }
  body[data-oc-system] nav:is(.floating-navigation, .floating-menu) { padding: 10px 16px 44px; border-radius: 28px; }
  body[data-oc-system] :is(.floating-navigation-button, .floating-menu__action, .floating-action) > span:not([aria-hidden='true']) { font-size: 12px; }
  body[data-oc-system] :is(.floating-navigation-button, .floating-menu__action) svg { width: 25px; height: 25px; }
  /* Five actions still fit at 320px, with captions wrapping inside each slot. */
  body[data-oc-system] nav:has(> :nth-child(5)) { --oc-nav-circle: 44px; --oc-nav-gap: 8px; --oc-nav-caption: 52px; padding-inline: 12px; }
  body[data-oc-system] nav:has(> :nth-child(5)) > * > span:not([aria-hidden='true']) { font-size: 12px; overflow-wrap: anywhere; }
}