/* =========================================================
   Alericos · Campos unificados (alx-fields)
   Estilo dos componentes: popup compartilhado, select custom,
   stepper de número e autocomplete. Tudo em tokens var(--alx-*)
   com fallback embutido. Carregado globalmente (front-end + app).
   ========================================================= */

/* ---------------------------------------------------- POPUP (portal) --- */
/* Anexado a document.body; posição é controlada por JS (alx-popup.js). */
.alx-popup {
  position: fixed;
  box-sizing: border-box;
  background: var(--alx-bg-card, #1A2C3E);
  border: 1px solid var(--alx-border, #2C3E50);
  border-radius: var(--alx-radius, 12px);
  box-shadow: var(--alx-shadow-lg, 0 8px 30px rgba(0, 0, 0, .45));
  color: var(--alx-text, #E9ECEF);
  font-family: var(--alx-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  animation: alx-popup-in .12s ease;
}
@keyframes alx-popup-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .alx-popup { animation: none; } }

.alx-popup::-webkit-scrollbar { width: 8px; }
.alx-popup::-webkit-scrollbar-thumb { background: rgba(33, 158, 188, .5); border-radius: 4px; }
.alx-popup { scrollbar-width: thin; scrollbar-color: rgba(33, 158, 188, .5) transparent; }

.alx-popup__list { list-style: none; margin: 0; padding: 6px; }

.alx-popup__option {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem .75rem;
  border-radius: var(--alx-radius-sm, 8px);
  cursor: pointer;
  color: var(--alx-text, #E9ECEF);
  font-size: .9375rem;
  line-height: 1.3;
  min-height: 40px;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
@media (pointer: coarse) { .alx-popup__option { min-height: 44px; } }

.alx-popup__option.is-active,
.alx-popup__option:hover { background: var(--alx-surface-primary-2, rgba(33, 158, 188, .18)); }
.alx-popup__option[aria-selected="true"] { color: var(--alx-primary-light, #8ECAE6); font-weight: 600; }
.alx-popup__option[aria-selected="true"] .alx-popup__check { margin-left: auto; color: var(--alx-primary, #219EBC); }
.alx-popup__option[aria-selected="false"] .alx-popup__check { display: none; }
.alx-popup__option[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.alx-popup__option[aria-disabled="true"]:hover { background: transparent; }

.alx-popup__group-label {
  padding: .5rem .75rem .25rem;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--alx-primary-light, #8ECAE6);
  font-weight: 700;
}
.alx-popup__empty,
.alx-popup__loading {
  padding: .85rem .75rem;
  color: var(--alx-text-muted, #ADB5BD);
  font-size: .875rem;
  text-align: center;
}

/* Itens ricos (avatar + nome + ação) p/ autocomplete de busca */
.alx-popup__option-media {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
  overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: var(--alx-surface-2, rgba(255, 255, 255, .1)); color: var(--alx-primary-light, #8ECAE6);
}
.alx-popup__option-media img { width: 100%; height: 100%; object-fit: cover; }
.alx-popup__option-body { flex: 1 1 auto; min-width: 0; }
.alx-popup__option-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alx-popup__option-sub { font-size: .8125rem; color: var(--alx-text-muted, #ADB5BD); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alx-popup__option-tag { flex: 0 0 auto; font-size: .8125rem; color: var(--alx-warning, #F4A261); }
.alx-popup__option-action { flex: 0 0 auto; }
.alx-popup__option-action .button,
.alx-popup__option-action button {
  font-size: .8125rem; padding: .35rem .7rem; border-radius: var(--alx-radius-sm, 8px);
  background: var(--alx-primary, #219EBC); color: #fff; border: 0; cursor: pointer; white-space: nowrap;
}

/* ----------------------------------------------------- SELECT custom --- */
.alx-select { position: relative; display: block; width: 100%; }

/* Nativo escondido SEM display:none: continua focável, enviável e acessível. */
.alx-select__native {
  position: absolute !important;
  width: 1px; height: 1px; margin: 0; padding: 0; border: 0;
  opacity: 0; pointer-events: none; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.alx-select__trigger {
  display: flex; align-items: center; width: 100%;
  box-sizing: border-box;
  padding: .75rem 2.5rem .75rem 1rem;
  position: relative;
  background: var(--alx-surface-1, rgba(255, 255, 255, .06));
  border: 1px solid var(--alx-border, #2C3E50);
  border-radius: var(--alx-radius, 12px);
  color: var(--alx-text, #E9ECEF);
  font-family: inherit; font-size: .9375rem; line-height: 1.3;
  text-align: left; cursor: pointer;
  transition: var(--alx-transition-fast, all .15s ease);
  -webkit-tap-highlight-color: transparent;
}
.alx-select__trigger:focus-visible,
.alx-select__trigger.is-open {
  outline: none;
  border-color: var(--alx-primary, #219EBC);
  box-shadow: 0 0 0 3px rgba(33, 158, 188, .2);
}
.alx-select__trigger[disabled],
.alx-select__trigger.is-disabled { opacity: .55; cursor: not-allowed; }
.alx-select__value { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alx-select__value.is-placeholder { color: var(--alx-text-muted, #ADB5BD); }
.alx-select__chevron {
  position: absolute; right: 1rem; top: 50%; transform: translateY(-50%);
  width: 12px; height: 12px; pointer-events: none;
  color: var(--alx-primary-light, #8ECAE6);
  transition: transform .15s ease;
}
.alx-select__trigger.is-open .alx-select__chevron { transform: translateY(-50%) rotate(180deg); }
.alx-select--inline { display: inline-block; width: auto; }
.alx-select--inline .alx-select__trigger { width: auto; }

/* texto da option (com check à direita quando selecionada) */
.alx-popup__opt-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alx-popup__check { flex: 0 0 auto; }

/* ---------------------------------------------------- STEPPER número --- */
.alx-stepper { display: inline-flex; align-items: stretch; width: 100%; box-sizing: border-box; }
.alx-stepper__btn {
  flex: 0 0 auto; width: 2.75rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--alx-surface-2, rgba(255, 255, 255, .10));
  border: 1px solid var(--alx-border, #2C3E50);
  color: var(--alx-primary-light, #8ECAE6);
  font-size: 1.25rem; line-height: 1; cursor: pointer; user-select: none;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: var(--alx-transition-fast, all .15s ease);
}
.alx-stepper__btn:hover { background: var(--alx-surface-primary-2, rgba(33, 158, 188, .18)); color: var(--alx-primary, #219EBC); }
.alx-stepper__btn:active { background: var(--alx-surface-primary-1, rgba(33, 158, 188, .10)); }
.alx-stepper__btn.is-disabled { opacity: .35; cursor: not-allowed; }
.alx-stepper__btn--minus { border-radius: var(--alx-radius, 12px) 0 0 var(--alx-radius, 12px); border-right: 0; }
.alx-stepper__btn--plus { border-radius: 0 var(--alx-radius, 12px) var(--alx-radius, 12px) 0; border-left: 0; }
.alx-stepper > input[type="number"] {
  flex: 1 1 auto; min-width: 0; text-align: center;
  border-radius: 0 !important;
}
/* esconder spinners nativos apenas dentro do stepper (não-enriquecidos seguem nativos) */
.alx-stepper > input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.alx-stepper > input[type="number"]::-webkit-inner-spin-button,
.alx-stepper > input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }