/* Zenith — controles propios para la web (js/zn-ui.js): lista desplegable,
   dialogo de confirmacion y aviso. Solo tokens --zn-*; lo que flota lleva
   sombra de la escala y, como todo lo que flota, puede llevar borde. */

/* --- lista desplegable ------------------------------------------------------------- */
.zn-sel-pop {
  position: fixed; z-index: 2000; display: flex; flex-direction: column;
  max-width: min(360px, calc(100vw - 16px)); padding: 6px;
  background: var(--zn-ink-3); border: 1px solid color-mix(in srgb, var(--zn-t1) 12%, transparent);
  border-radius: var(--zn-radius-lg); box-shadow: var(--zn-shadow-3);
  animation: zn-sel-in var(--zn-dur-2) var(--zn-ease); transform-origin: top center;
}
.zn-sel-pop.up { transform-origin: bottom center; }
.zn-sel-pop.leaving { pointer-events: none; animation: zn-fade-out var(--zn-dur-1) linear both; }
@keyframes zn-sel-in { from { opacity: 0; transform: translateY(-4px) scale(0.98); } }
@keyframes zn-fade-out { to { opacity: 0; } }
.zn-sel-list { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
.zn-sel-item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 34px; padding: 7px 12px;
  border: 0; border-radius: var(--zn-radius); background: transparent; text-align: left; cursor: pointer;
  color: var(--zn-t1); font: inherit; font-size: var(--zn-fs-md); line-height: 1.25;
}
.zn-sel-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zn-sel-item.active { background: color-mix(in srgb, var(--zn-t1) 8%, transparent); }
.zn-sel-item:disabled { opacity: 0.4; cursor: default; }
.zn-sel-item.on { font-weight: 600; }
.zn-sel-check { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--zn-live); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.zn-sel-item.on .zn-sel-check { opacity: 1; }

/* celular: hoja desde abajo */
.zn-sel-pop.sheet {
  inset: 0; max-width: none; padding: 0; border: 0; border-radius: 0; box-shadow: none; justify-content: flex-end;
  background: rgba(0, 0, 0, 0.5); animation: zn-fade-in var(--zn-dur-2) var(--zn-ease);
}
.zn-sel-pop.sheet .zn-sel-panel {
  background: var(--zn-ink-3); border-radius: var(--zn-radius-xl) var(--zn-radius-xl) 0 0; padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
  max-height: 70vh; display: flex; flex-direction: column; animation: zn-sheet-in var(--zn-dur-3) var(--zn-ease);
}
.zn-sel-pop.sheet .zn-sel-item { min-height: 50px; font-size: var(--zn-fs-lg); padding: 10px 14px; }
@keyframes zn-fade-in { from { opacity: 0; } }
@keyframes zn-sheet-in { from { transform: translateY(24px); opacity: 0; } }

/* --- dialogo de confirmacion ---------------------------------------------------------- */
.zn-dialog-veil {
  position: fixed; inset: 0; z-index: 2100; display: grid; place-items: center; padding: 16px;
  background: rgba(0, 0, 0, 0.5); animation: zn-fade-in var(--zn-dur-2) var(--zn-ease);
}
.zn-dialog-veil.leaving { animation: zn-fade-out var(--zn-dur-1) linear both; }
.zn-dialog {
  width: min(420px, 100%); padding: 24px; border-radius: var(--zn-radius-xl); background: var(--zn-ink-3);
  border: 1px solid color-mix(in srgb, var(--zn-t1) 12%, transparent); box-shadow: var(--zn-shadow-3);
}
.zn-dialog-msg { margin: 0 0 20px; color: var(--zn-t1); font-size: var(--zn-fs-lg); line-height: 1.5; }
.zn-dialog-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }

/* --- aviso breve ----------------------------------------------------------------------- */
.zn-toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 2200; transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  max-width: min(520px, calc(100vw - 32px)); padding: 10px 18px; border-radius: 999px;
  background: var(--zn-t1); color: var(--zn-ink-0); font-size: var(--zn-fs-md); font-weight: 500; box-shadow: var(--zn-shadow-2);
  transition: opacity var(--zn-dur-2) var(--zn-ease), transform var(--zn-dur-2) var(--zn-ease);
}
.zn-toast.on { opacity: 1; transform: translate(-50%, 0); }