/* Campo de teléfono (país + número). Usa los tokens del sistema visual; sin recursos externos. */
.phone-field {
  display: flex; align-items: stretch; width: 100%; min-width: 0; position: relative; box-sizing: border-box;
  height: var(--field-h, 34px); background: var(--surface-1, #fff); color: var(--ink, #13202a);
  border: 1px solid var(--border-strong, #7c8d8f); border-radius: var(--r-sm, 6px);
  transition: border-color var(--dur-1, .12s) var(--ease, ease), box-shadow var(--dur-1, .12s) var(--ease, ease);
}
.q .phone-field { height: var(--field-h, 34px); }
.phone-field:focus-within { border-color: var(--focus, #1d6497); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus, #1d6497) 28%, transparent); }
.phone-field:has([aria-invalid="true"]) { border-color: var(--red, #b3261e); box-shadow: 0 0 0 1px var(--red, #b3261e); }
.phone-field .phone-country {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: 100%; padding: 0 var(--s2, 8px) 0 var(--s3, 12px);
  background: transparent; color: inherit; font: inherit; cursor: pointer;
  border: 0; border-right: 1px solid var(--border, #d6dedd); border-radius: calc(var(--r-sm, 6px) - 1px) 0 0 calc(var(--r-sm, 6px) - 1px);
}
.phone-field .phone-country:hover { background: var(--surface-2, #f5f8f7); }
.phone-field .phone-country:focus-visible { outline: 2px solid var(--focus, #1d6497); outline-offset: -3px; }
.phone-field .phone-country:disabled { cursor: not-allowed; opacity: .6; }
.phone-field .phone-number { flex: 1 1 auto; min-width: 0; height: 100%; background: transparent; border: 0; border-radius: 0 calc(var(--r-sm, 6px) - 1px) calc(var(--r-sm, 6px) - 1px) 0; box-shadow: none; font-variant-numeric: tabular-nums; }
.phone-field .phone-number:focus, .phone-field .phone-number[aria-invalid="true"] { border: 0; box-shadow: none; outline: none; }
.phone-flag { width: 22px; height: 15px; flex: none; border-radius: 2px; box-shadow: 0 0 0 1px rgba(19, 32, 42, .22); }
.phone-dial { font-variant-numeric: tabular-nums; white-space: nowrap; }
.phone-caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: .7; }
.phone-panel {
  position: fixed; z-index: 1000; display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface-1, #fff); color: var(--ink, #13202a); border: 1px solid var(--border-strong, #7c8d8f);
  border-radius: var(--r-sm, 6px); box-shadow: 0 8px 24px rgba(19, 32, 42, .22);
}
.phone-panel[hidden] { display: none; }
.phone-panel .phone-search { flex: none; width: auto; margin: 8px; }
.phone-list { list-style: none; margin: 0; padding: 0 0 4px; overflow-y: auto; overscroll-behavior: contain; flex: 1 1 auto; }
.phone-option { display: flex; align-items: center; gap: 10px; padding: 0 12px; min-height: 44px; cursor: pointer; }
.phone-option.is-active, .phone-option:hover { background: var(--brand-soft, #e3f1df); }
.phone-option[aria-selected="true"] .phone-name { font-weight: 600; }
.phone-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phone-code { flex: none; color: var(--muted, #56666d); font-variant-numeric: tabular-nums; }
.phone-sep { height: 1px; margin: 4px 0; background: var(--border, #d6dedd); }
.phone-empty { padding: 12px; color: var(--muted, #56666d); }
@media (max-width: 480px) { .phone-field .phone-country { gap: 4px; padding-left: var(--s2, 8px); } }
/* Desplegable de país (bandera + nombre): el botón ocupa todo el ancho del campo. */
.country-field .phone-country { flex: 1 1 auto; justify-content: flex-start; border-right: 0; border-radius: calc(var(--r-sm, 6px) - 1px); }
.country-field .phone-country .phone-name { flex: 1 1 auto; text-align: left; }