/*!
 * phone-input.css — estilos del componente phone-input.
 *
 * Diseñado para integrarse tanto en sites/ (booking modal con variables --bm-*)
 * como en panels/ (variables --color-*, .input-field).
 *
 * Las variables se resuelven con fallbacks de manera que el componente sigue
 * teniendo buen aspecto incluso si no hay design tokens definidos en el host.
 *
 * IMPORTANTE: este archivo es compartido entre sites/ y panels/. Si lo cambias
 * en un sitio, cópialo idéntico al otro.
 */

.phone-input {
  --pi-bg:           var(--bm-input-bg, var(--color-bg-elevated, #ffffff));
  --pi-border:       var(--bm-border, var(--color-border, #d1d5db));
  --pi-border-focus: var(--bm-accent, var(--color-primary, #2563eb));
  --pi-text:         var(--bm-text, var(--color-text-primary, #111827));
  --pi-muted:        var(--bm-text-secondary, var(--color-text-secondary, #6b7280));
  --pi-error:        var(--color-error, #dc2626);
  --pi-radius:       var(--bm-radius, 8px);
  --pi-shadow:       0 4px 16px rgba(0, 0, 0, 0.08);
  --pi-prefix-bg:    var(--bm-input-prefix-bg, #f3f4f6);

  position: relative;
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  color: var(--pi-text);
  box-sizing: border-box;
}

.phone-input *,
.phone-input *::before,
.phone-input *::after {
  box-sizing: border-box;
}

/* ─── Fila principal: botón país + input número ───────────────────────── */

.phone-input__row {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--pi-border);
  border-radius: var(--pi-radius);
  background: var(--pi-bg);
  overflow: hidden;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.phone-input:focus-within .phone-input__row {
  border-color: var(--pi-border-focus);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.phone-input.has-error .phone-input__row {
  border-color: var(--pi-error);
}

.phone-input.has-error:focus-within .phone-input__row {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

/* ─── Botón selector de país ───────────────────────────────────────────── */

.phone-input__country {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 10px 10px 12px;
  background: var(--pi-prefix-bg);
  border: 0;
  border-right: 1px solid var(--pi-border);
  color: var(--pi-text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  min-height: 42px;
  transition: background 120ms ease;
}

.phone-input__country:hover:not(:disabled) {
  background: color-mix(in srgb, var(--pi-prefix-bg) 88%, #000);
}

.phone-input__country:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.phone-input__flag {
  font-size: 18px;
  line-height: 1;
  display: inline-block;
  /* iOS/macOS pintan emojis con padding raro; nivelamos */
  transform: translateY(-1px);
}

.phone-input__dial {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.phone-input__caret {
  font-size: 10px;
  color: var(--pi-muted);
  margin-left: 2px;
}

/* ─── Input del número nacional ────────────────────────────────────────── */

.phone-input__number {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  color: var(--pi-text);
  outline: none;
  font-variant-numeric: tabular-nums;
}

.phone-input__number::placeholder {
  color: var(--pi-muted);
  opacity: 0.55;
  letter-spacing: 0.08em;
}

.phone-input__number:disabled {
  background: transparent;
  cursor: not-allowed;
}

.phone-input.is-disabled .phone-input__row {
  opacity: 0.6;
  background: color-mix(in srgb, var(--pi-bg) 90%, #000);
}

/* ─── Dropdown ─────────────────────────────────────────────────────────── */

.phone-input__dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 9999;
  width: min(360px, 100%);
  max-width: 100vw;
  background: var(--pi-bg);
  border: 1px solid var(--pi-border);
  border-radius: var(--pi-radius);
  box-shadow: var(--pi-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: min(380px, 60vh);
}

.phone-input__dropdown[hidden] {
  display: none;
}

.phone-input__search-wrap {
  padding: 8px;
  border-bottom: 1px solid var(--pi-border);
  background: var(--pi-bg);
  position: sticky;
  top: 0;
}

.phone-input__search {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--pi-border);
  border-radius: 6px;
  background: var(--pi-bg);
  color: var(--pi-text);
  font-family: inherit;
  font-size: 14px;
  outline: none;
}

.phone-input__search:focus {
  border-color: var(--pi-border-focus);
}

.phone-input__list {
  margin: 0;
  padding: 4px 0;
  list-style: none;
  overflow-y: auto;
  flex: 1 1 auto;
  -webkit-overflow-scrolling: touch;
}

.phone-input__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  cursor: pointer;
  font-size: 14px;
  color: var(--pi-text);
  user-select: none;
}

.phone-input__item:hover:not([aria-disabled="true"]) {
  background: color-mix(in srgb, var(--pi-prefix-bg) 75%, var(--pi-bg));
}

.phone-input__item.is-selected {
  background: color-mix(in srgb, var(--pi-border-focus) 12%, var(--pi-bg));
  font-weight: 500;
}

.phone-input__item-flag {
  flex: 0 0 auto;
  font-size: 18px;
  line-height: 1;
}

.phone-input__item-name {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.phone-input__item-dial {
  flex: 0 0 auto;
  color: var(--pi-muted);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}

.phone-input__item--empty {
  cursor: default;
  color: var(--pi-muted);
  font-style: italic;
  justify-content: center;
}

/* ─── Error inline ─────────────────────────────────────────────────────── */

.phone-input__error {
  margin-top: 6px;
  color: var(--pi-error);
  font-size: 13px;
  line-height: 1.4;
}

.phone-input__error[hidden] {
  display: none;
}

/* ─── Variante compacta para panels (formularios densos) ─────────────── */

.phone-input--compact .phone-input__country,
.phone-input--compact .phone-input__number {
  min-height: 36px;
  padding-top: 7px;
  padding-bottom: 7px;
  font-size: 13.5px;
}

.phone-input--compact .phone-input__country {
  gap: 5px;
  padding-left: 10px;
  padding-right: 8px;
}

.phone-input--compact .phone-input__flag {
  font-size: 16px;
}

.phone-input--compact .phone-input__error {
  font-size: 12.5px;
}

/* ─── Variante "input-field": iguala estilo a .input-field de panels ───
 * Activa con `appearance: 'input-field'` en createPhoneInput.
 * Para usar dentro del modal "Crear reserva" del panel admin, donde los
 * demás inputs (nombre, email, nota, buscar cliente) son `.input-field`.
 *
 * Diferencias con el estilo por defecto:
 *  - border-radius = var(--radius) (6px), no 8px
 *  - padding compactado para alinear con .input-field (0.5rem 0.75rem)
 *  - fondo del botón país = var(--input) (mismo que el input), no gris
 *  - separador entre país y número más sutil
 */
.phone-input.phone-input--input-field {
  --pi-radius:    var(--radius, 0.375rem);
  --pi-prefix-bg: var(--input, #f5e8d2);
  --pi-bg:        var(--input, #f5e8d2);
}
.phone-input--input-field .phone-input__country,
.phone-input--input-field .phone-input__number {
  min-height: 36px;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.9375rem;
}
.phone-input--input-field .phone-input__country {
  padding-left: 0.625rem;
  padding-right: 0.5rem;
  border-right-color: color-mix(in srgb, var(--border, #f5e8d2) 60%, transparent);
}
.phone-input--input-field .phone-input__number {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

/* ─── Mobile: dropdown popup local debajo del input ───────────────────── */

/* F6 fix C v2: rediseño simple. El intento anterior usaba bottom-sheet
   (position:fixed; bottom:0) que ocupaba toda la pantalla y tapaba el
   input siguiente del wizard (ej. campo "Cliente"). El usuario lo describió:
   "como mitad de pantalla y que vaya saliendo, sin complicarse".

   Ahora: dropdown local anclado al input phone (position:absolute igual
   que desktop), max-height 50vh, esquina visible para cerrar tocando
   fuera. Sin VisualViewport API, sin bottom anchor — el navegador móvil
   maneja el scroll natural si el dropdown queda parcialmente fuera. */
@media (max-width: 640px) {
  .phone-input__dropdown {
    /* Hereda position:absolute, top:calc(100%+6px) del estilo desktop */
    width: 280px;            /* en vez de 100vw — popup local */
    max-width: calc(100vw - 24px);
    max-height: 50vh;        /* mitad pantalla — no tapa la siguiente sección */
    border-radius: var(--pi-radius);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  .phone-input__search-wrap {
    padding: 10px 12px;
  }

  .phone-input__item {
    padding: 12px;
    font-size: 15px;
  }
}

/* ─── Modo oscuro: hereda variables del host si las define ────────────── */

@media (prefers-color-scheme: dark) {
  .phone-input {
    --pi-prefix-bg: var(--bm-input-prefix-bg, rgba(255, 255, 255, 0.06));
    --pi-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
  }
}

[data-theme="dark"] .phone-input {
  --pi-prefix-bg: var(--bm-input-prefix-bg, rgba(255, 255, 255, 0.06));
  --pi-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}