/* ════ Enix Combobox — Valle design system ═══════════════════════════════ */
/* Root wrapper */
.enix-combo { position: relative; width: 100%; }
.enix-cbo-spin[hidden], .enix-cbo-ctl__clear[hidden] { display: none !important; }

/* ── Control (trigger button or typeahead input wrapper) ── */
.enix-cbo-ctl {
  box-sizing: border-box;
  display: flex; align-items: center; gap: 8px; width: 100%; height: 42px;
  border: 1.5px solid var(--gray200); border-radius: 10px; padding: 0 12px;
  background: #fff; font-size: 13.5px; color: var(--gray800); text-align: left;
  cursor: pointer; transition: border-color .18s, box-shadow .18s, background .18s;
}
.enix-cbo-ctl--trigger { font-family: inherit; }
.enix-cbo-ctl__icon  { display: flex; flex-shrink: 0; font-size: 15px; line-height: 1; color: var(--primary, #1678B7); }
.enix-cbo-ctl__icon svg { width: 16px; height: 16px; }
.enix-cbo-ctl__value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.enix-cbo-ctl__value.is-placeholder { color: var(--gray400); }
.enix-cbo-ctl__clear { display: flex; flex-shrink: 0; color: var(--gray400); border-radius: 6px; padding: 2px; cursor: pointer; transition: .14s; }
.enix-cbo-ctl__clear svg { width: 15px; }
.enix-cbo-ctl__clear:hover { color: var(--gray700); background: var(--gray100); }
.enix-cbo-ctl__chev  { display: flex; flex-shrink: 0; margin-left: auto; }
.enix-cbo-ctl__chev svg { width: 18px; color: var(--gray400); transition: transform .2s; }
.enix-combo.is-open .enix-cbo-ctl__chev svg { transform: rotate(180deg); }

/* typeahead: wrapper is cursor:text, inner input inherits */
.enix-cbo-ctl--input { cursor: text; }
.enix-cbo-input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-size: 13.5px; color: var(--gray800); height: 100%; }
.enix-cbo-input::placeholder { color: var(--gray400); }
.enix-cbo-spin { display: flex; flex-shrink: 0; }

/* ── Focus ring (closed) ── */
.enix-combo:not(.is-open) .enix-cbo-ctl--trigger:focus-visible,
.enix-combo:not(.is-open) .enix-cbo-ctl--input:focus-within {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(30,95,168,.1);
}

/* ── Open: control + popup form one seamless piece ── */
.enix-combo.is-open .enix-cbo-ctl {
  outline: none; box-shadow: none; border-color: var(--gray200);
  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
.enix-combo.is-open.drop-up .enix-cbo-ctl {
  border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;
  border-top-left-radius: 0;    border-top-right-radius: 0;
}

/* ── Disabled ── */
.enix-combo.is-disabled .enix-cbo-ctl { background: var(--gray50); cursor: not-allowed; border-color: var(--gray200); }
.enix-combo.is-disabled .enix-cbo-ctl__value { color: var(--gray400); }
.enix-combo.is-disabled .enix-cbo-ctl__icon svg,
.enix-combo.is-disabled .enix-cbo-ctl__chev svg { opacity: .45; }

/* ── Popup ── */
.enix-cbo-popup {
  /* Fixed + top/left/width set in JS (enix-combo.js _place), not CSS: it needs to escape
     any clipping ancestor (e.g. a modal's overflow:hidden dialog / overflow-y:auto body),
     which an absolute popup positioned relative to .enix-combo can't do. */
  position: fixed; z-index: 1090;
  background: #fff; border: 1.5px solid var(--gray200); border-top: none;
  border-radius: 0 0 11px 11px;
  box-shadow: 0 14px 32px rgba(13,34,64,.13); overflow: hidden;
  animation: enixCboIn .14s cubic-bezier(.2,.8,.2,1);
}
.enix-combo.drop-up .enix-cbo-popup {
  border-top: 1.5px solid var(--gray200); border-bottom: none;
  border-radius: 11px 11px 0 0;
  box-shadow: 0 -14px 32px rgba(13,34,64,.13);
}
@keyframes enixCboIn { from { opacity: 0; } to { opacity: 1; } }

/* Portado a <body> por JS para escapar de contenedores con overflow:hidden (p.ej.
   tarjetas .card); la posición se calcula en JS via getBoundingClientRect(). */
.enix-cbo-popup--portal { position: fixed; left: auto; right: auto; z-index: 1200; }
.enix-cbo-popup--portal.drop-up {
  border-top: 1.5px solid var(--gray200); border-bottom: none;
  border-radius: 11px 11px 0 0;
  box-shadow: 0 -14px 32px rgba(13,34,64,.13);
}

/* search bar inside popup */
.enix-cbo-popup__search { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--gray100); }
.enix-cbo-popup__search-icon { display: flex; }
.enix-cbo-popup__search-icon svg { width: 17px; color: var(--gray400); }
.enix-cbo-search-input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-size: 13.5px; color: var(--gray800); }
.enix-cbo-search-input::placeholder { color: var(--gray400); }

/* ── Listbox ── */
.enix-cbo-listbox { max-height: 266px; overflow-y: auto; padding: 6px; overscroll-behavior: contain; }
.enix-cbo-listbox::-webkit-scrollbar { width: 9px; }
.enix-cbo-listbox::-webkit-scrollbar-thumb { background: var(--gray200); border-radius: 99px; border: 2px solid #fff; }
.enix-cbo-listbox::-webkit-scrollbar-thumb:hover { background: var(--gray400); }

/* group headers */
.enix-cbo-group { display: flex; align-items: center; gap: 7px; padding: 9px 10px 5px; font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--gray500); }
.enix-cbo-group + * { margin-top: 1px; }
.enix-cbo-group__icon { font-size: 12px; line-height: 1; color: var(--primary, #1678B7); }
.enix-cbo-group__icon svg { width: 15px; height: 15px; }
.enix-cbo-listbox > .enix-cbo-group:not(:first-child) { margin-top: 5px; border-top: 1px solid var(--gray100); padding-top: 10px; }

/* options */
.enix-cbo-opt {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px;
  font-size: 13.5px; color: var(--gray700); cursor: pointer; line-height: 1.25;
}
.enix-cbo-opt__main  { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.enix-cbo-opt__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.enix-cbo-opt__label b { color: var(--navy); font-weight: 700; }
.enix-cbo-opt__sub   { font-size: 11.5px; color: var(--gray400); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.enix-cbo-opt__check { margin-left: auto; flex-shrink: 0; color: var(--blue); opacity: 0; }
.enix-cbo-opt__check svg { width: 16px; }
.enix-cbo-opt.is-active   { background: var(--blue-lt); color: var(--navy); }
.enix-cbo-opt.is-active .enix-cbo-opt__label b { color: var(--blue); }
.enix-cbo-opt.is-selected { color: var(--blue); font-weight: 600; }
.enix-cbo-opt.is-selected .enix-cbo-opt__check { opacity: 1; }

/* ── Skeleton shimmer ── */
.enix-cbo-skel { padding: 11px 10px; }
.enix-cbo-skel__bar {
  display: block; height: 11px; border-radius: 6px;
  background: linear-gradient(90deg, var(--gray100) 25%, var(--gray200) 37%, var(--gray100) 63%);
  background-size: 400% 100%;
  animation: enixCboShimmer 1.15s ease-in-out infinite;
}
@keyframes enixCboShimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ── Empty state ── */
.enix-cbo-empty { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 28px 16px; color: var(--gray400); font-size: 13px; text-align: center; }
.enix-cbo-empty__icon { width: 22px; opacity: .55; }
.enix-cbo-empty b { color: var(--gray600); }

/* .enix-combo--flat styles are defined per-page to avoid cache issues */

.enix-combo--compact .enix-cbo-ctl { padding: 0 6px; gap: 2px; }
.enix-combo--compact .enix-cbo-ctl__value { text-align: center; text-overflow: clip; }
.enix-combo--compact .enix-cbo-ctl__chev svg { width: 14px; }

/* Popup del combo compacto (p.ej. edad de niños): el popup mide lo mismo que el
   trigger angosto, así que centramos el label y no reservamos el check ni el gap,
   para que números de 2 dígitos (10-17) entren completos sin cortarse. */
.enix-cbo-popup--compact .enix-cbo-listbox { padding: 5px; }
.enix-cbo-popup--compact .enix-cbo-opt { padding: 8px 6px; gap: 0; justify-content: center; }
.enix-cbo-popup--compact .enix-cbo-opt__label { overflow: visible; text-align: center; }
.enix-cbo-popup--compact .enix-cbo-opt__check { display: none; }

/* ── Spinner ── */
.enix-cbo-spinner { width: 17px; height: 17px; color: var(--blue); animation: enixCboRot .7s linear infinite; }
@keyframes enixCboRot { to { transform: rotate(360deg); } }

/* ── Tooltip del nombre completo ──
   Agregado a <body> por JS (ver enix-combo.js _showTip) para escapar del overflow
   de la lista. Aparece al instante (fade ~90ms), solo cuando el nombre está recortado. */
.enix-cbo-tip {
  position: fixed; z-index: 1300; pointer-events: none;
  max-width: 340px; padding: 7px 10px;
  background: var(--navy, #0d2240); color: #fff;
  font-size: 12.5px; line-height: 1.35; font-weight: 500;
  border-radius: 8px; box-shadow: 0 8px 22px rgba(13,34,64,.24);
  white-space: normal; word-break: break-word;
  opacity: 0; transform: translateY(2px);
  transition: opacity .09s ease, transform .09s ease;
}
.enix-cbo-tip.is-visible { opacity: 1; transform: none; }