/* Foco de teclado visible, sin los anillos morados gruesos ni halos apilados. */
html[data-focus-input="pointer"] body :is(button,a,input,select,textarea,[tabindex]):focus,
html[data-focus-input="pointer"] body :is(label,.choice,.hair-choice,.phone-input-wrap,.money-input,.secret-field,.service-detail-grid):focus-within {
  outline: none !important;
  box-shadow: none !important;
}
html body :is(input,select,textarea):focus-visible {border-radius:8px}
html body :is(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 1px solid #c586ed !important;
  outline-offset: 1px !important;
}

html body :is(button, a, input, select, textarea, [tabindex]):focus,
html body :is(label, .choice, .hair-choice):has(:focus-visible),
html body .filter-buttons input:focus-visible + span {
  box-shadow: none !important;
}

html body :is(label, .choice, .hair-choice):has(:focus-visible) {
  outline: 1px solid #c586ed !important;
  outline-offset: 1px !important;
}

html body :is(.phone-input-wrap, .money-input, .secret-field, .service-detail-grid):focus-within {
  outline: 1px solid #c586ed !important;
  outline-offset: 1px !important;
  box-shadow: none !important;
}

html body input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: none !important;
}

html body input[type="range"]:focus-visible::-moz-range-thumb {
  box-shadow: none !important;
}

/* Numeric measurements: never frame the number or its unit, in either editor.
   This deliberately outranks #stepBody's generic input/label focus rules. */
html body .range-value,
html body .range-value:focus-within,
html body .range-value input:is(:focus, :focus-visible),
html body #stepBody .range-value,
html body #stepBody .range-value:has(:focus-visible),
html body #stepBody .range-value input:is(:focus, :focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}
/* Los valores compactos (p. ej. 165 KG) no son campos tipo tarjeta.
   Quita el marco morado en reposo y conserva una guía discreta al usar teclado. */
html body .range-value input {
  border: 0 !important;
  border-bottom: 1px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}
html body .range-value input:focus-visible {
  border-bottom-color: #c586ed !important;
}
html body input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}
html body input[type="number"]::-webkit-inner-spin-button,
html body input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  display: none;
  margin: 0;
}
/* Keyboard orientation uses the existing bottom edge, not a rectangle. */
html body .range-value input:focus-visible,
html body #stepBody .range-value input:focus-visible {
  border-bottom-color: #e5c5ff !important;
}
/* Programmatic headings and composite fields never acquire a second frame. */
html body :is(h1,h2,h3)[tabindex]:focus,
html body :is(.phone-input-wrap,.money-input,.secret-field,.service-detail-grid):focus-within,
html body input[type="range"]:focus-visible,
html body #stepBody input[type="range"]:focus-visible,
html body #stepBody :is(.phone-input-wrap,.money-input,.secret-field,.service-detail-grid):focus-within,
html body .media-viewer :is(.viewer-close,.viewer-prev,.viewer-next):focus-visible {
  outline:none!important;
  box-shadow:none!important;
}
html[data-focus-input="keyboard"] body input[type="range"]:focus-visible::-webkit-slider-thumb {box-shadow:0 0 0 3px #e5c5ff!important}
html[data-focus-input="keyboard"] body input[type="range"]:focus-visible::-moz-range-thumb {box-shadow:0 0 0 3px #e5c5ff!important}
html[data-focus-input="keyboard"] body .media-viewer :is(.viewer-close,.viewer-prev,.viewer-next):focus-visible {color:#e5c5ff!important;background:rgba(116,37,168,.6)!important;border-radius:999px!important}