/* Foco de teclado visible, sin los anillos morados gruesos ni halos apilados. */
html:root[data-focus-input="pointer"] body :is(button,a,input,select,textarea,[tabindex]):focus,
html:root[data-focus-input="pointer"] body :is(label,.choice,.hair-choice,.phone-input-wrap,.money-input,.secret-field,.service-detail-grid):focus-within {
  outline: none;
  box-shadow: none;
}
/* La vista de ingreso declara anillos de 2px para teclado. En interacción de
   puntero se suprimen aquí con contexto de página, sin debilitar el foco teclado. */
html:root[data-focus-input="pointer"] body:has(.auth-shell--login) .auth-shell--login .field > input:focus-visible,
html:root[data-focus-input="pointer"] body:has(.auth-shell--login) .auth-shell--login .secret-field:focus-within {
  outline: none;
  box-shadow: none;
}
html:root body :is(input,select,textarea):focus-visible {border-radius:8px}
html:root body :is(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 1px solid #c586ed;
  outline-offset: 1px;
}

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

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

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

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

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

/* Numeric measurements: never frame the number or its unit, in either editor.
   This deliberately outranks #stepBody's generic input/label focus rules. */
html:root body .range-value,
html:root body .range-value:focus-within,
html:root body .range-value input:is(:focus, :focus-visible),
html:root body #stepBody .range-value,
html:root body #stepBody .range-value:has(:focus-visible),
html:root body #stepBody .range-value input:is(:focus, :focus-visible) {
  outline: none;
  box-shadow: none;
}
/* 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:root body .range-value input {
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
}
html:root body .range-value input:focus-visible {
  border-bottom-color: #c586ed;
}
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:root body .range-value input:focus-visible,
html:root body #stepBody .range-value input:focus-visible {
  border-bottom-color: #e5c5ff;
}
/* Programmatic headings and composite fields never acquire a second frame. */
html:root body :is(h1,h2,h3)[tabindex]:focus,
html:root body :is(.phone-input-wrap,.money-input,.secret-field,.service-detail-grid):focus-within,
html:root body input[type="range"]:focus-visible,
html:root body #stepBody input[type="range"]:focus-visible,
html:root body #stepBody :is(.phone-input-wrap,.money-input,.secret-field,.service-detail-grid):focus-within,
html:root body .media-viewer :is(.viewer-close,.viewer-prev,.viewer-next):focus-visible {
  outline:none;
  box-shadow:none;
}
html:root[data-focus-input="keyboard"] body input[type="range"]:focus-visible::-webkit-slider-thumb {box-shadow:0 0 0 3px #e5c5ff}
html:root[data-focus-input="keyboard"] body input[type="range"]:focus-visible::-moz-range-thumb {box-shadow:0 0 0 3px #e5c5ff}
html:root[data-focus-input="keyboard"] body .media-viewer :is(.viewer-close,.viewer-prev,.viewer-next):focus-visible {color:#e5c5ff;background:rgba(116,37,168,.6);border-radius:999px}