@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

package/dist/collection/components/sui-input/sui-input.css

@@ -0,0 +1,600 @@
+@charset "UTF-8";
+/* ═══ SUI Input — SUI Design System 2.0 ═════════════════════════════════════
+ * Homologado con el SUI Angular (05-11-2026). Figma 8p1k72aKKvzJV4XcvPS4VO —
+ * "Input Field". Label y hint se delegan a <sui-form-label>/<sui-form-hint>.
+ * Los afijos proyectados se estilan con ::slotted() (en Angular, ::ng-deep
+ * [data-slot=…]).
+ * ══════════════════════════════════════════════════════════════════════ */
+:host {
+  display: block;
+  font-family: var(--sui-font-sans);
+}
+
+/* ── Label host spacing ── */
+/* sui-form-label renders its own styles; we only control the gap to the field */
+.sui-input__label-host {
+  display: block;
+  /* Figma: gap 4px label→field. El frame raíz (266:5245) mide 84px = label 20 +
+     field 40 + hint 16 + 2 gaps; (84−76)/2 = 4px. El código React confirma
+     `gap-[4px]` en el wrapper flex-col. Antes estaba en 6px (+2px de más). */
+  margin-bottom: 4px;
+}
+
+/* ── Field wrapper ── */
+.sui-input__field {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  box-sizing: border-box;
+  background: var(--sui-bg-white-0);
+  border: 1px solid var(--sui-stroke-soft-200);
+  box-shadow: var(--sui-regular-shadow-x-small); /* 0 1px 2px 0 rgba(10,13,20,0.03) */
+  transition: border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out), box-shadow var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);
+  /* ---- Size variants — asymmetric padding matches Figma exactly ----
+     `min-height` lock obligatorio: Safari iOS recalcula la altura del flex
+     container cuando emerge el clear button (al empezar a escribir), causando
+     un growth visible. min-height fija el alto canon (32/36/40) y previene
+     el reflow.
+
+     IMPORTANTE — altura pixel-perfect (falla-patrón #9 del skill):
+     Figma dibuja el borde "inside" (no suma al frame de 32/36/40). En CSS con
+     `box-sizing: border-box`, el contenido natural (padding-y + line-height 20)
+     ya iguala el min-height, así que el borde de 1px×2 se SUMA por encima →
+     el field salía +2px (34/38/42 medido). Para que el box total mida exacto
+     32/36/40 se resta 1px al padding-y (absorbe el borde): py de Figma 6/8/10
+     → CSS 5/7/9, y el +1px del borde reconstruye el espaciado interior visual.
+     El padding-x NO se toca (no hay borde horizontal que compensar en el alto). */
+  /* xsmall: X-Small (32) — Figma py=6 pl=8 pr=6; CSS py=5 (−1px borde), gap=6, radius=8 */
+}
+:host([data-sui-size=xsmall]) .sui-input__field {
+  gap: 6px;
+  padding: 5px 6px 5px 8px;
+  border-radius: var(--sui-radius-8);
+  min-height: 32px;
+}
+.sui-input__field {
+  /* small: Small (36) — Figma py=8 pl=10 pr=8; CSS py=7 (−1px borde), gap=8, radius=8 */
+}
+:host([data-sui-size=small]) .sui-input__field {
+  gap: 8px;
+  padding: 7px 8px 7px 10px;
+  border-radius: var(--sui-radius-8);
+  min-height: 36px;
+}
+.sui-input__field {
+  /* medium: Medium (40) — Figma py=10 pl=12 pr=10; CSS py=9 (−1px borde), gap=8, radius=10 (default) */
+}
+:host([data-sui-size=medium]) .sui-input__field, :host(:not([data-sui-size])) .sui-input__field {
+  gap: 8px;
+  padding: 9px 10px 9px 12px;
+  border-radius: var(--sui-radius-10);
+  min-height: 40px;
+}
+.sui-input__field {
+  /* large (48) — alto del `sui-button` large. py 12 → CSS 11 (−1px del borde),
+     que es la misma convención de los tamaños de arriba: 11+11+24+2 = 48 */
+}
+:host([data-sui-size=large]) .sui-input__field {
+  gap: 10px;
+  padding: 11px 12px 11px 14px;
+  border-radius: var(--sui-radius-12);
+  min-height: 48px;
+}
+.sui-input__field {
+  /* xlarge (52) — alto del `sui-button` xlarge. py 14 → CSS 13: 13+13+24+2 = 52 */
+}
+:host([data-sui-size=xlarge]) .sui-input__field {
+  gap: 10px;
+  padding: 13px 14px 13px 16px;
+  border-radius: var(--sui-radius-12);
+  min-height: 52px;
+}
+.sui-input__field {
+  /* ---- Píldora (opt-in) ----
+     Va DESPUÉS de los tamaños para ganarles sin `!important`: misma
+     especificidad, y en un empate manda el que se declara último. */
+}
+:host([data-sui-full-radius]) .sui-input__field {
+  border-radius: 999px;
+}
+.sui-input__field {
+  /* ---- Hover ---- */
+  /* Excluye readonly: el estado readonly de Figma es totalmente estático
+     (bg-weak-50 + border suave), sin feedback de hover. */
+}
+.sui-input__field:not(.sui-input__field--disabled):not(.sui-input__field--error):not(.sui-input__field--readonly):hover {
+  border-color: var(--sui-stroke-sub-300);
+}
+.sui-input__field {
+  /* ---- Focus-within ---- */
+  /* Figma: border → stroke-strong-950, shadow: 0 0 0 2px white, 0 0 0 4px slate-alpha-16 */
+  /* Excluye readonly: aunque [readonly] sigue siendo focusable en browsers, su
+     estado Figma es estático y no muestra el focus ring. */
+}
+.sui-input__field:not(.sui-input__field--disabled):not(.sui-input__field--error):not(.sui-input__field--readonly):focus-within {
+  border-color: var(--sui-stroke-strong-950);
+  box-shadow: 0 0 0 2px var(--sui-bg-white-0), 0 0 0 4px var(--sui-slate-alpha-16);
+}
+.sui-input__field {
+  /* ---- Error ---- */
+}
+.sui-input__field--error {
+  border-color: var(--sui-state-error-base);
+  box-shadow: none;
+}
+.sui-input__field--error:not(.sui-input__field--disabled):hover {
+  border-color: var(--sui-state-error-base);
+}
+.sui-input__field--error:not(.sui-input__field--disabled):focus-within {
+  border-color: var(--sui-state-error-base);
+  box-shadow: 0 0 0 3px var(--sui-red-alpha-10);
+}
+.sui-input__field {
+  /* ---- Disabled ---- */
+  /* Figma disabled: bg-weak-50, no border (border color omitted = transparent effectively) */
+}
+.sui-input__field--disabled {
+  background: var(--sui-bg-weak-50);
+  border-color: transparent;
+  box-shadow: none;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.sui-input__field {
+  /* ---- Readonly ---- */
+}
+.sui-input__field--readonly {
+  background: var(--sui-bg-weak-50);
+  border-color: var(--sui-stroke-soft-200);
+  box-shadow: none;
+}
+.sui-input__field {
+  /* ---- Slots start/end ----
+     Default: afijo DECORATIVO 20×20 sin eventos (íconos, banderas, kbd). El
+     split-field interactivo (control) overridea esto más abajo por lado. */
+}
+.sui-input__field ::slotted([slot=start]),
+.sui-input__field ::slotted([slot=end]) {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  width: var(--sui-icon-size-md); /* 20px */
+  height: var(--sui-icon-size-md); /* 20px */
+  color: var(--sui-icon-sub-600);
+  pointer-events: none;
+}
+.sui-input__field {
+  /* ---- Afijo INTERACTIVO (control) — suelta el lockdown decorativo ----
+     Cuando el lado se marca como control (`leadingControl`/`trailingControl`),
+     el slot deja de ser un ícono 20×20 muerto y se vuelve un contenedor flush
+     que aloja el control proyectado (ej. sui-compact-select-for-input). El
+     control trae su propio padding/tamaño; el slot solo lo deja respirar y
+     estira a la altura completa para que pegue contra el divisor. */
+}
+:host([data-sui-leading-control]) .sui-input__field ::slotted([slot=start]), :host([data-sui-trailing-control]) .sui-input__field ::slotted([slot=end]) {
+  width: auto;
+  height: auto;
+  align-self: stretch;
+  pointer-events: auto;
+}
+
+/* ── Inner region wrapper ──
+   Para todos los types sin divisor, es transparente (`display: contents`):
+   los hijos (icono, prefix, control) actúan como hijos flex directos de
+   `.sui-input__field`, exactamente igual que antes. Para split-field (divisor
+   leading/trailing) se convierte en una zona flex con su propio padding + gap +
+   divisor(es) (ver `.sui-input__field--split`). */
+.sui-input__inner {
+  display: contents;
+}
+
+/* ── Split-field con divisor vertical (genérico por lado) ──
+   - trailing (Figma node 332:1667 "Button"): divisor border-right + zona de
+     acción (end-slot) flush a la derecha. `type='button'` lo activa.
+   - leading (Figma node 313:10267 "Phone"): divisor border-left + afijo
+     interactivo (start-slot, ej. country select) flush a la izquierda.
+   Ambos comparten la misma mecánica; solo cambia el lado del border y qué slot
+   queda flush. El wrapper pierde su padding (lo asume la zona interna), recorta
+   overflow para que el divisor + radius queden limpios, y estira sus hijos a la
+   altura completa para que el divisor corra de arriba a abajo. */
+.sui-input__field--split {
+  align-items: stretch;
+  overflow: hidden;
+  /* El padding lo lleva `.sui-input__inner`, no el field. */
+  padding: 0 !important;
+  /* gap lo maneja el inner; entre inner y los slots no hay gap (flush). */
+  gap: 0 !important;
+  /* Zona interna: input + íconos. Lleva el padding/gap del size + divisor(es). */
+}
+.sui-input__field--split .sui-input__inner {
+  display: flex;
+  flex: 1 1 auto;
+  min-width: 0;
+  align-items: center;
+  box-sizing: border-box;
+}
+.sui-input__field--split {
+  /* Padding + gap por tamaño en la zona interna (espeja el padding del field
+     estándar). El lado que tiene divisor conserva el padding del size; ahí
+     pega el border. */
+  /* py reducido 1px igual que el field estándar (compensa el borde del wrapper
+     para que el split-field mida 32/36/40 exacto). */
+}
+:host([data-sui-size=xsmall]) .sui-input__field--split .sui-input__inner {
+  gap: 6px;
+  padding: 5px 6px 5px 8px;
+}
+:host([data-sui-size=small]) .sui-input__field--split .sui-input__inner {
+  gap: 8px;
+  padding: 7px 8px 7px 10px;
+}
+:host([data-sui-size=medium]) .sui-input__field--split .sui-input__inner, :host(:not([data-sui-size])) .sui-input__field--split .sui-input__inner {
+  gap: 8px;
+  padding: 9px 10px 9px 12px;
+}
+:host([data-sui-size=large]) .sui-input__field--split .sui-input__inner {
+  gap: 10px;
+  padding: 11px 12px 11px 14px;
+}
+:host([data-sui-size=xlarge]) .sui-input__field--split .sui-input__inner {
+  gap: 10px;
+  padding: 13px 14px 13px 16px;
+}
+
+/* ── Divisor TRAILING (border-right en el inner) — node 332:1667 ── */
+.sui-input__field--split-trailing .sui-input__inner {
+  border-right: 1px solid var(--sui-stroke-soft-200);
+}
+.sui-input__field--split-trailing.sui-input__field--error .sui-input__inner {
+  border-right-color: var(--sui-state-error-base);
+}
+.sui-input__field--split-trailing.sui-input__field--disabled .sui-input__inner {
+  border-right-color: transparent;
+}
+.sui-input__field--split-trailing {
+  /* Zona de acción (end-slot): flush a la derecha, cuadrada, interactiva.
+     Figma node 332:1872 → padding del size (10/8/6), íconos 20px. */
+}
+.sui-input__field--split-trailing ::slotted([slot=end]) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: auto;
+  height: auto;
+  align-self: stretch;
+  color: var(--sui-icon-sub-600);
+  pointer-events: auto;
+}
+:host([data-sui-size=xsmall]) .sui-input__field--split-trailing ::slotted([slot=end]) {
+  padding: 6px;
+}
+:host([data-sui-size=small]) .sui-input__field--split-trailing ::slotted([slot=end]) {
+  padding: 8px;
+}
+:host([data-sui-size=medium]) .sui-input__field--split-trailing ::slotted([slot=end]), :host(:not([data-sui-size])) .sui-input__field--split-trailing ::slotted([slot=end]) {
+  padding: 10px;
+}
+:host([data-sui-size=large]) .sui-input__field--split-trailing ::slotted([slot=end]) {
+  padding: 12px;
+}
+:host([data-sui-size=xlarge]) .sui-input__field--split-trailing ::slotted([slot=end]) {
+  padding: 14px;
+}
+
+/* ── Divisor LEADING (border-left en el inner) — Phone node 313:10271 ──
+   Espejo exacto del trailing. El afijo (start-slot, típicamente un
+   sui-compact-select-for-input) queda flush a la izquierda; el divisor es el
+   border-left de la zona de input. El control proyectado trae su propio
+   padding (el del compact-select 10/8/10/10 medium), así que el slot NO agrega
+   padding propio — solo deja pasar los eventos y estira a altura completa
+   (ver el override de afijo interactivo arriba). */
+.sui-input__field--split-leading .sui-input__inner {
+  border-left: 1px solid var(--sui-stroke-soft-200);
+}
+.sui-input__field--split-leading.sui-input__field--error .sui-input__inner {
+  border-left-color: var(--sui-state-error-base);
+}
+.sui-input__field--split-leading.sui-input__field--disabled .sui-input__inner {
+  border-left-color: transparent;
+}
+.sui-input__field--split-leading {
+  /* Afijo leading no-control (decorativo, ej. ícono de marca): si NO se marcó
+     como control, le damos el padding del size para que no quede pegado al
+     borde — mismo padding asimétrico del field estándar por su lado. */
+}
+:host(:not([data-sui-leading-control])[data-sui-size=xsmall]) .sui-input__field--split-leading ::slotted([slot=start]) {
+  padding: 6px 6px 6px 8px;
+  box-sizing: content-box;
+}
+:host(:not([data-sui-leading-control])[data-sui-size=small]) .sui-input__field--split-leading ::slotted([slot=start]) {
+  padding: 8px 8px 8px 10px;
+  box-sizing: content-box;
+}
+:host(:not([data-sui-leading-control])[data-sui-size=medium]) .sui-input__field--split-leading ::slotted([slot=start]), :host(:not([data-sui-leading-control]):not([data-sui-size])) .sui-input__field--split-leading ::slotted([slot=start]) {
+  padding: 10px 8px 10px 10px;
+  box-sizing: content-box;
+}
+:host(:not([data-sui-leading-control])[data-sui-size=large]) .sui-input__field--split-leading ::slotted([slot=start]) {
+  padding: 12px 10px 12px 12px;
+  box-sizing: content-box;
+}
+:host(:not([data-sui-leading-control])[data-sui-size=xlarge]) .sui-input__field--split-leading ::slotted([slot=start]) {
+  padding: 14px 10px 14px 14px;
+  box-sizing: content-box;
+}
+
+/* ── Prefix ── */
+.sui-input__prefix {
+  flex-shrink: 0;
+  font-family: var(--sui-font-sans);
+  font-size: var(--sui-type-paragraph-sm-size); /* 14px */
+  font-weight: var(--sui-type-paragraph-sm-weight); /* 400 */
+  line-height: var(--sui-type-paragraph-sm-line); /* 20px */
+  font-feature-settings: "ss11" 1, "calt" 0, "liga" 0; /* canon SUI 2.0 */
+  color: var(--sui-text-sub-600);
+  user-select: none;
+  pointer-events: none;
+  /* large / xlarge: acompaña al valor (16/24, regla del 03-10-2026). Está en
+     la misma línea que lo que se escribe: un prefijo de 14 junto a un valor de
+     16 se ve desalineado. */
+}
+:host([data-sui-size=large]) .sui-input__prefix, :host([data-sui-size=xlarge]) .sui-input__prefix {
+  font-size: var(--sui-type-paragraph-md-size, 16px);
+  font-weight: var(--sui-type-paragraph-md-weight, 400);
+  line-height: var(--sui-type-paragraph-md-line, 24px);
+}
+.sui-input__prefix {
+  /* ≤767 px el valor sube a 16 en TODOS los sizes (anti-zoom de iOS, ver
+     .sui-input__control). El prefijo lo acompaña (fix 04-10-2026): «S/» de 14
+     al lado de un monto de 16 se veía desalineado. Solo font-size, igual que
+     el valor, así que el alto del campo no cambia. */
+}
+@media (max-width: 767px) {
+  .sui-input__prefix {
+    font-size: 16px;
+  }
+}
+
+/* ── Built-in icon (from icon= input) ── */
+.sui-input__icon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  width: var(--sui-icon-size-md); /* 20px */
+  height: var(--sui-icon-size-md); /* 20px */
+  color: var(--sui-icon-sub-600);
+  pointer-events: none;
+}
+:host([data-sui-disabled]) .sui-input__icon {
+  color: var(--sui-icon-disabled-300);
+}
+
+/* ── Clear button ── */
+/* La caja del clear acompaña a su ícono en CADA tamaño — ver `clearPx()` en el
+   .ts, donde está el porqué. Con `flex-shrink: 0` y la caja fija, el ícono más
+   grande quedaría recortado. */
+:host([data-sui-size=xsmall]) .sui-input__clear {
+  width: 12px;
+  height: 12px;
+}
+
+:host([data-sui-size=small]) .sui-input__clear {
+  width: 14px;
+  height: 14px;
+}
+
+:host([data-sui-size=large]) .sui-input__clear {
+  width: 18px;
+  height: 18px;
+}
+
+:host([data-sui-size=xlarge]) .sui-input__clear {
+  width: 20px;
+  height: 20px;
+}
+
+.sui-input__clear {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  /* Override del global mobile `button { min-height/min-width: 44px }` (Apple
+     HIG touch target). Sin este override, el clear button se infla a 44x44
+     en mobile y empuja el field container a >40px de alto. El touch target
+     amplio se logra a través del field completo (~36-40px) que captura el
+     tap aunque el icon visual sea 16x16. */
+  min-height: 0;
+  min-width: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--sui-icon-sub-600);
+  cursor: pointer;
+  opacity: 0.7;
+  /* line-height: 0 evita que el button herede el line-height 20px del padre
+     (paragraph-sm), que en Safari iOS empuja la altura del flex container
+     al emerger este button. */
+  line-height: 0;
+  transition: opacity var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);
+}
+.sui-input__clear:hover {
+  opacity: 1;
+  color: var(--sui-text-strong-950);
+}
+.sui-input__clear:focus {
+  outline: none;
+}
+
+/* ── Password toggle (eye) button ── */
+.sui-input__eye {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  /* 20px: en Figma el eye mide igual que el lock (20), no 16. */
+  width: 20px;
+  height: 20px;
+  /* Mismo override que .sui-input__clear — anular global mobile
+     `button { min-height/min-width: 44px }` para que no infle el field. */
+  min-height: 0;
+  min-width: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--sui-icon-sub-600);
+  cursor: pointer;
+  /* line-height: 0 evita que el button herede el line-height del padre. */
+  line-height: 0;
+  transition: color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);
+}
+.sui-input__eye:hover {
+  color: var(--sui-text-strong-950);
+}
+.sui-input__eye:focus {
+  outline: none;
+}
+
+/* Área táctil de la X y del ojo en el teléfono (fix 04-10-2026, piso táctil de
+   44 px decidido por el dueño). Se ven de 12-20 px y así se quedan: un ::before
+   invisible de 44 × 44 centrado sobre el botón agranda dónde se toca sin mover
+   el campo (por eso siguen anulando el `button { min-height: 44px }` global). */
+.sui-input__clear,
+.sui-input__eye {
+  position: relative;
+}
+@media (max-width: 767px) {
+  .sui-input__clear::before,
+  .sui-input__eye::before {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 44px;
+    height: 44px;
+    transform: translate(-50%, -50%);
+  }
+}
+
+/* ── Native input reset ── */
+.sui-input__control {
+  flex: 1 1 auto;
+  min-width: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  padding: 0;
+  margin: 0;
+  font-family: var(--sui-font-sans);
+  font-size: var(--sui-type-paragraph-sm-size); /* 14px desktop */
+  font-weight: var(--sui-type-paragraph-sm-weight); /* 400 */
+  line-height: var(--sui-type-paragraph-sm-line); /* 20px */
+  letter-spacing: var(--sui-type-paragraph-sm-spacing); /* -0.006em */
+  /* Figma setea estos OpenType features en cada text node del input field
+     (ss11=alt zero/disambiguated glyphs, calt=0 contextual alt off, liga=0
+     ligatures off). Canon SUI 2.0 — mismo valor que el resto de los SUI. */
+  font-feature-settings: "ss11" 1, "calt" 0, "liga" 0;
+  color: var(--sui-text-strong-950);
+  -webkit-appearance: none;
+  appearance: none;
+  /* box-sizing border-box + height 100% lock mobile lo previene reflow */
+  box-sizing: border-box;
+  /* EXCEPCIÓN para los tipos que dependen del control NATIVO del sistema.
+     `appearance: none` sobre un <input type="date"> en el WebView de iOS borra
+     el campo entero: queda vacío —ni siquiera el «dd/mm/aaaa» del sistema— y el
+     tap no abre el selector. El usuario no podía poner la fecha de vencimiento
+     de un cupón, y lo mismo pasaba en super admin y en gastos: seis campos de
+     fecha muertos por dos líneas pensadas para los inputs de texto.
+
+     `::-webkit-date-and-time-value` alinea el valor a la izquierda; sin él iOS
+     lo centra y queda desalineado con el resto de los campos del formulario. */
+}
+.sui-input__control[type=date], .sui-input__control[type=time], .sui-input__control[type=datetime-local], .sui-input__control[type=month], .sui-input__control[type=week] {
+  -webkit-appearance: none;
+  appearance: none;
+  /* Alto mínimo: sin esto, vacío colapsa y el área de tap queda diminuta. */
+  min-height: 1.25em;
+}
+.sui-input__control[type=date]::-webkit-date-and-time-value, .sui-input__control[type=time]::-webkit-date-and-time-value, .sui-input__control[type=datetime-local]::-webkit-date-and-time-value, .sui-input__control[type=month]::-webkit-date-and-time-value, .sui-input__control[type=week]::-webkit-date-and-time-value {
+  text-align: left;
+  margin: 0;
+}
+.sui-input__control[type=date], .sui-input__control[type=time], .sui-input__control[type=datetime-local], .sui-input__control[type=month], .sui-input__control[type=week] {
+  /* El ícono de calendario del sistema, alineado al canto derecho. */
+}
+.sui-input__control[type=date]::-webkit-calendar-picker-indicator, .sui-input__control[type=time]::-webkit-calendar-picker-indicator, .sui-input__control[type=datetime-local]::-webkit-calendar-picker-indicator, .sui-input__control[type=month]::-webkit-calendar-picker-indicator, .sui-input__control[type=week]::-webkit-calendar-picker-indicator {
+  margin-left: auto;
+  opacity: 0.55;
+  cursor: pointer;
+}
+.sui-input__control {
+  /* large / xlarge: el texto sube un escalón, Paragraph/Medium 16/24, también
+     en desktop (regla del 03-10-2026: hasta medium 14, large y xlarge 16).
+     El alto no cambia: el padding ya contaba la línea de 24 (11+11+24+2 = 48
+     y 13+13+24+2 = 52). */
+}
+:host([data-sui-size=large]) .sui-input__control, :host([data-sui-size=xlarge]) .sui-input__control {
+  font-size: var(--sui-type-paragraph-md-size, 16px);
+  font-weight: var(--sui-type-paragraph-md-weight, 400);
+  line-height: var(--sui-type-paragraph-md-line, 24px);
+  letter-spacing: var(--sui-type-paragraph-md-spacing, -0.011em);
+}
+.sui-input__control {
+  /* iOS Safari zoomea el viewport al focus de cualquier input con
+     font-size < 16px. Ese zoom de viewport hace que el input se vea
+     más grande al focus / al escribir — el síntoma del "growth".
+     Forzando 16px en mobile prevenimos el zoom completamente.
+     El visual size en mobile será un poco más grande (16 vs 14),
+     pero es el patrón estándar usado por Material, Tailwind UI,
+     Apple Design Guidelines, etc. */
+}
+@media (max-width: 767px) {
+  .sui-input__control {
+    font-size: 16px;
+  }
+}
+.sui-input__control::placeholder {
+  color: var(--sui-text-soft-400);
+  opacity: 1;
+}
+.sui-input__control:disabled {
+  color: var(--sui-text-disabled-300);
+  cursor: not-allowed;
+  -webkit-text-fill-color: var(--sui-text-disabled-300);
+}
+.sui-input__control[readonly] {
+  color: var(--sui-text-sub-600);
+  cursor: default;
+}
+.sui-input__control {
+  /* Suppress browser focus ring — handled by .sui-input__field:focus-within */
+}
+.sui-input__control:focus {
+  outline: none;
+}
+.sui-input__control {
+  /* Remove number spinners */
+}
+.sui-input__control[type=number] {
+  -moz-appearance: textfield;
+}
+.sui-input__control[type=number]::-webkit-inner-spin-button, .sui-input__control[type=number]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+.sui-input__control {
+  /* Remove search clear button */
+}
+.sui-input__control[type=search]::-webkit-search-decoration, .sui-input__control[type=search]::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+}
+
+/* ── Hint host spacing ── */
+/* sui-form-hint renders its own styles; we only control the gap from the field */
+.sui-input__hint-host {
+  display: block;
+  /* Figma: gap 4px field→hint (mismo cálculo del frame 84px que el label). */
+  margin-top: 4px;
+}