/*
 * Aiden UI · phone-input
 * CSS module de Arc UI (registry/components/phone-input/phone-input.module.css) traducido a clases
 * .aui-phone-input-<parte>, con las MISMAS variables de Arc (kit/foundation.css). Sin colores propios.
 * Los muelles que en Arc mueve Motion los mueve el JS (física real o curvas linear() equivalentes);
 * las transiciones cortas se quedan aquí con las curvas y duraciones de Arc.
 */

/* Sin hueco de rejilla: cada fila lleva su propio espacio (igual que Arc). */
.aui-phone-input { --pi-h: var(--control-height-md); --pi-panel-w: 320px; position: relative; display: grid; min-width: 0; font-family: var(--font-body); letter-spacing: var(--tracking-body); color: var(--foreground); text-align: left; }
.aui-phone-input[data-open] { z-index: 30; }
.aui-phone-input [hidden] { display: none !important; }
.aui-phone-input .aui-phone-input-native { display: none !important; }

/* Defensa ante el CSS agresivo de los paneles (inputs y botones con !important). */
.aui-phone-input.aui-phone-input button, .aui-phone-input.aui-phone-input input { box-sizing: border-box !important; margin: 0 !important; min-width: 0 !important; min-height: 0 !important; max-width: none !important; border: 0 !important; box-shadow: none !important; outline: none !important; background-image: none !important; -webkit-appearance: none !important; appearance: none !important; font-family: inherit !important; letter-spacing: inherit !important; text-transform: none !important; text-shadow: none !important; line-height: normal; }
.aui-phone-input button { padding: 0; background-color: transparent; }

.aui-phone-input-label { justify-self: start; margin-bottom: var(--space-2); color: var(--foreground); font-size: var(--text-sm); font-weight: 500; line-height: var(--leading-body); }

/* La carcasa es la del input con etiqueta: un borde, un radio y un cambio de borde suave al pasar y al enfocar. */
.aui-phone-input-control { position: relative; display: flex; min-width: 0; height: var(--pi-h); box-sizing: border-box; border: 1px solid var(--border-strong); border-radius: var(--radius-control); background: var(--surface); transition: border-color var(--duration-fast) var(--ease-standard); }
@media (hover: hover) and (pointer: fine) { .aui-phone-input-control:hover:not([data-invalid]) { border-color: var(--foreground); } }
.aui-phone-input-control:has(.aui-phone-input-number:focus) { border-color: var(--foreground); }
.aui-phone-input-control[data-invalid] { border-color: var(--danger); }
.aui-phone-input[data-disabled] .aui-phone-input-control { opacity: .5; background: var(--surface-muted); }

/* El ancla guarda el sitio del botón cerrado y muelle a otro ancho si el prefijo cambia de longitud. */
.aui-phone-input-anchor { position: relative; flex: none; height: 100%; }
.aui-phone-input-anchor::after { content: ""; position: absolute; top: 10px; right: 0; bottom: 10px; width: 1px; background: var(--border); transition: opacity var(--duration-fast) var(--ease-standard); }
.aui-phone-input[data-open] .aui-phone-input-anchor::after { opacity: 0; }

/* Un solo material para los dos estados. Abierto, se sale sobre el borde de la carcasa para no duplicarlo. */
.aui-phone-input-shape { position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%; overflow: clip; border-radius: var(--pi-closed-r, 17px); background: var(--surface); transition: box-shadow var(--duration-considered) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard); }
.aui-phone-input-shape::after { content: ""; position: absolute; inset: 0; z-index: 3; border: 1px solid var(--border); border-radius: inherit; opacity: 0; pointer-events: none; transition: opacity var(--duration-fast) var(--ease-standard); }
.aui-phone-input[data-open] .aui-phone-input-shape { translate: -1px -1px; background: var(--surface-raised); box-shadow: var(--shadow-floating); }
.aui-phone-input[data-open] .aui-phone-input-shape::after { opacity: 1; }
.aui-phone-input[data-disabled] .aui-phone-input-shape { background: transparent; }

.aui-phone-input-lid { position: absolute; z-index: 1; top: 0; right: 0; left: 0; height: calc(var(--pi-h) - 2px); }

.aui-phone-input-trigger { box-sizing: border-box; display: flex; height: calc(var(--pi-h) - 2px); align-items: center; padding: 0 36px 0 12px; font-size: var(--text-sm); font-weight: 500; white-space: nowrap; }
.aui-phone-input .aui-phone-input-lid .aui-phone-input-trigger { position: absolute; inset: 3px auto 3px 3px; width: calc(100% - 6px) !important; height: auto !important; margin: 0; padding: 0 33px 0 9px !important; border: 0; border-radius: calc(var(--radius-control) - 4px) !important; background-color: transparent !important; color: var(--foreground) !important; cursor: pointer; font-size: var(--text-sm) !important; font-weight: 500 !important; text-align: left; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: background-color var(--duration-fast) var(--ease-standard); }
@media (hover: hover) and (pointer: fine) { .aui-phone-input:not([data-open]):not([data-disabled]) .aui-phone-input-lid .aui-phone-input-trigger:hover { background-color: var(--surface-muted) !important; } }
.aui-phone-input .aui-phone-input-lid .aui-phone-input-trigger:active:not(:disabled) { background-color: var(--surface-muted) !important; }
.aui-phone-input .aui-phone-input-lid .aui-phone-input-trigger:disabled { cursor: not-allowed; }
/* Sin anillos de foco (decisión de producto de Arc): el foco de teclado se lee como el mismo relleno suave que al pasar. */
.aui-phone-input .aui-phone-input-lid .aui-phone-input-trigger:focus-visible { background-color: var(--surface-muted) !important; }
.aui-phone-input .aui-phone-input-clear:focus-visible, .aui-phone-input .aui-phone-input-close-hit:focus-visible { background-color: color-mix(in oklab, var(--foreground) 8%, transparent) !important; }
/* Copia invisible que dice cuánto quiere medir el botón cerrado. */
.aui-phone-input-measure { visibility: hidden; pointer-events: none; width: max-content; }

.aui-phone-input-slot { position: relative; display: block; min-width: 0; height: 100%; flex: 1; }
.aui-phone-input[data-open] .aui-phone-input-slot { opacity: 0; transition: opacity var(--duration-instant) var(--ease-standard); }
.aui-phone-input-layer { position: absolute; inset: 0; display: flex; align-items: center; gap: 6px; }
/* Sin emojis (regla de la casa): el código ISO en una pastilla ocupa el sitio de la bandera de Arc (20 px). */
.aui-phone-input-iso { display: inline-grid; width: 24px; height: 18px; box-sizing: border-box; flex: none; place-items: center; padding: 0; border-radius: 6px; background: color-mix(in oklab, var(--foreground) 6.5%, transparent); color: var(--text-secondary); font-size: 10.5px; font-weight: 500; letter-spacing: .02em; line-height: 1; font-variant-numeric: tabular-nums; }
.aui-phone-input-dial { font-variant-numeric: tabular-nums; }

.aui-phone-input-chevron { position: absolute; top: 50%; right: 12px; display: grid; width: 16px; height: 16px; margin-top: -8px; place-items: center; color: var(--text-muted); pointer-events: none; transition: transform var(--pi-glide-dur, 380ms) var(--pi-glide, var(--ease-spring)); }
.aui-phone-input[data-open] .aui-phone-input-chevron { transform: rotate(180deg); }
.aui-phone-input-chevron svg, .aui-phone-input-search-icon svg, .aui-phone-input-clear svg, .aui-phone-input-check svg, .aui-phone-input-valid svg { display: block; }

/* La búsqueda ocupa el sitio de la tapa mientras la lista está abierta. */
.aui-phone-input-search-row { position: absolute; inset: 0; display: flex; align-items: center; gap: var(--space-2); padding: 0 2px 0 13px; opacity: 0; filter: blur(2px); transition: opacity .1s var(--ease-standard), filter .1s var(--ease-standard); }
.aui-phone-input[data-open] .aui-phone-input-search-row { opacity: 1; filter: blur(0); transition: opacity .18s var(--ease-enter) .05s, filter .18s var(--ease-enter) .05s; }
.aui-phone-input-search-row[inert] { pointer-events: none; }
.aui-phone-input-search-icon { display: grid; flex: none; place-items: center; color: var(--text-muted); }
.aui-phone-input .aui-phone-input-search { min-width: 0; width: auto !important; height: 100% !important; flex: 1; padding: 0 !important; border: 0; border-radius: 0 !important; background: transparent !important; color: var(--foreground) !important; font: inherit; font-size: var(--text-sm) !important; letter-spacing: var(--tracking-body); outline: none; }
.aui-phone-input .aui-phone-input-search::placeholder { color: var(--text-muted); opacity: 1; }
.aui-phone-input .aui-phone-input-clear { display: grid; width: 24px !important; height: 24px !important; flex: none; place-items: center; padding: 0 !important; border: 0; border-radius: var(--radius-pill) !important; background-color: color-mix(in oklab, var(--foreground) 8%, transparent) !important; color: var(--text-secondary) !important; cursor: pointer; -webkit-tap-highlight-color: transparent; animation: aui-phone-input-pop var(--pi-glide-dur, 380ms) var(--pi-glide, var(--ease-spring)); }
/* Va encima del chevrón compartido: el chevrón cierra la lista. */
.aui-phone-input .aui-phone-input-close-hit { width: 36px !important; height: 36px !important; flex: none; padding: 0 !important; border: 0; border-radius: var(--radius-pill) !important; background-color: transparent !important; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--duration-fast) var(--ease-standard); }
@media (hover: hover) and (pointer: fine) {
  .aui-phone-input .aui-phone-input-close-hit:hover, .aui-phone-input .aui-phone-input-clear:hover { background-color: color-mix(in oklab, var(--foreground) 8%, transparent) !important; }
  .aui-phone-input .aui-phone-input-clear:hover { color: var(--foreground) !important; }
}
@keyframes aui-phone-input-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }

/* La lista cuelga bajo la tapa a su ancho final: las filas no se recolocan mientras la superficie muelle. */
.aui-phone-input-list-face { position: absolute; top: calc(var(--pi-h) - 2px); left: 0; box-sizing: border-box; width: var(--pi-panel-w); padding: 0 6px 6px; opacity: 0; transform: translateY(-6px); filter: blur(2px); transition: opacity .1s var(--ease-standard), transform .1s var(--ease-standard), filter .1s var(--ease-standard); }
.aui-phone-input[data-open] .aui-phone-input-list-face { opacity: 1; transform: none; filter: blur(0); transition: transform var(--pi-grow-dur, 480ms) var(--pi-grow, var(--ease-spring)), opacity .2s var(--ease-enter) .04s, filter .22s var(--ease-enter) .04s; }
.aui-phone-input-list-face::before { content: ""; position: absolute; top: 0; right: 14px; left: 14px; height: 1px; background: var(--border-subtle); }
.aui-phone-input-list-face[inert] { pointer-events: none; }
.aui-phone-input-scroll { max-height: 280px; overflow-y: auto; overscroll-behavior: contain; padding-top: 6px; scrollbar-width: thin; }
.aui-phone-input-options { position: relative; display: grid; gap: 2px; }
.aui-phone-input-highlight { position: absolute; top: 0; right: 0; left: 0; height: 0; border-radius: 16px; background: color-mix(in oklab, var(--foreground) 6.5%, transparent); pointer-events: none; opacity: 0; transition: opacity .12s var(--ease-enter); }
.aui-phone-input-group { display: grid; gap: 2px; }
.aui-phone-input-group + .aui-phone-input-group { margin-top: 4px; }
.aui-phone-input-group-label { padding: 8px 10px 4px; color: var(--text-muted); font-size: var(--text-xs); }
.aui-phone-input-option { position: relative; display: flex; min-height: 36px; box-sizing: border-box; align-items: center; gap: 10px; padding: 0 10px; border-radius: 16px; color: var(--text-secondary); cursor: pointer; font-size: var(--text-sm); user-select: none; -webkit-user-select: none; transition: color var(--duration-fast) var(--ease-standard); }
.aui-phone-input-option[data-active], .aui-phone-input-option[aria-selected="true"] { color: var(--foreground); }
.aui-phone-input-name { min-width: 0; flex: 1; overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.aui-phone-input-meta { flex: none; color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.aui-phone-input-check { display: grid; width: 16px; height: 16px; flex: none; place-items: center; color: var(--foreground); opacity: 0; transform: scale(.6); transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-spring) var(--ease-spring); }
.aui-phone-input-check[data-on] { opacity: 1; transform: none; }
.aui-phone-input-empty { margin: 0; padding: 12px 10px 14px; color: var(--text-muted); font-size: var(--text-sm); }

/* El número y su guía comparten caja. La guía pinta invisible lo escrito y, detrás, el resto del ejemplo tenue. */
.aui-phone-input-number-wrap { position: relative; display: flex; min-width: 0; flex: 1; align-items: center; }
.aui-phone-input .aui-phone-input-number, .aui-phone-input-guide { box-sizing: border-box; padding: 0 36px 0 12px !important; font-family: inherit; font-size: var(--text-sm) !important; font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-body) !important; line-height: var(--leading-body) !important; }
.aui-phone-input .aui-phone-input-number { position: relative; z-index: 1; width: 100% !important; height: 100% !important; min-width: 0; margin: 0; border: 0; border-radius: 0 var(--radius-control) var(--radius-control) 0 !important; background: transparent !important; color: var(--foreground) !important; outline: none; }
.aui-phone-input .aui-phone-input-number:disabled { cursor: not-allowed; }
.aui-phone-input-guide { position: absolute; inset: 0; display: flex; align-items: center; overflow: hidden; color: color-mix(in oklab, var(--text-muted) 72%, transparent); pointer-events: none; white-space: pre; }
.aui-phone-input-guide-typed { visibility: hidden; }
.aui-phone-input-valid { position: absolute; z-index: 1; top: 50%; right: 12px; display: grid; width: 18px; height: 18px; margin-top: -9px; place-items: center; color: var(--success); pointer-events: none; }

/* El espacio de la fila es relleno dentro del hueco recortado: la altura anima desde un cero de verdad. */
.aui-phone-input-message-slot { position: relative; display: block; overflow: hidden; }
.aui-phone-input-hint, .aui-phone-input-error { display: block; padding-top: var(--space-2); font-size: var(--text-xs); line-height: var(--leading-body); }
.aui-phone-input-hint { color: var(--text-muted); }
.aui-phone-input-error { color: var(--danger); }

.aui-phone-input-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .aui-phone-input-shape, .aui-phone-input-shape::after, .aui-phone-input-check, .aui-phone-input-slot, .aui-phone-input-control, .aui-phone-input-chevron { transition-duration: 0ms !important; }
  .aui-phone-input-search-row, .aui-phone-input[data-open] .aui-phone-input-search-row { filter: none; transition: opacity .12s linear; }
  .aui-phone-input-list-face, .aui-phone-input[data-open] .aui-phone-input-list-face { transform: none; filter: none; transition: opacity .12s linear; }
  .aui-phone-input .aui-phone-input-clear { animation: none; }
}
@media (prefers-contrast: more) { .aui-phone-input-shape::after { border-color: var(--border-strong); } }