/* ============================================================
   AflyZon live-data layer — auth chip, modal, toasts, skeletons.
   Themed to match the existing yellow (#ffed00) / dark aesthetic.
   Purely additive: no existing page rule is overridden here.
   ============================================================ */
:root{ --az-y:#ffed00; --az-y-rgb:255,237,0; --az-ink:#0a0b0d; --az-panel:#14161c; --az-panel-2:#1b1e26; --az-line:rgba(255,255,255,.09); --az-text:#f4f5f7; --az-dim:#9aa0ad; --az-ok:#33d17a; --az-bad:#ff5c5c; --az-e:cubic-bezier(.22,.61,.36,1); }

/* ---------- Account chip (fixed, unobtrusive) ---------- */
#azChip{ position:fixed; top:16px; right:18px; z-index:2147483000; display:flex; align-items:center; gap:8px; padding:7px 10px 7px 8px; border-radius:999px; background:rgba(20,22,28,.72); border:1px solid var(--az-line); color:var(--az-text); font:600 13px/1 "Inter",system-ui,sans-serif; letter-spacing:-.01em; cursor:pointer; backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%); box-shadow:0 10px 30px -12px rgba(0,0,0,.7); transition:transform .3s var(--az-e), border-color .3s var(--az-e), box-shadow .3s var(--az-e), opacity .3s var(--az-e); opacity:0; transform:translateY(-8px); }
#azChip.az-show{ opacity:1; transform:none; }
#azChip:hover{ transform:translateY(-1px); border-color:rgba(var(--az-y-rgb),.45); box-shadow:0 14px 34px -12px rgba(0,0,0,.8); }
#azChip .az-ava{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font:700 11px/1 "Space Grotesk","Inter",sans-serif; color:var(--az-ink); background:linear-gradient(140deg,#fff36b,var(--az-y)); box-shadow:0 0 0 1px rgba(var(--az-y-rgb),.4); flex:0 0 auto; }
#azChip .az-chip-label{ max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#azChip .az-chip-caret{ opacity:.5; }
@media (max-width:640px){ #azChip{ top:auto; bottom:82px; right:12px; padding:7px; } #azChip .az-chip-label,#azChip .az-chip-caret{ display:none; } }
/* Keep the fixed account chip clear of the "Profile" nav item. Only needed where the navbar reaches near the right edge; wide screens (navbar capped/centered) already clear the chip and are left untouched. */
@media (min-width:641px) and (max-width:1680px){ header.navbar .nav-inner{ padding-right:104px; } }

/* ---------- Dropdown ---------- */
#azMenu{ position:fixed; z-index:2147483001; min-width:230px; background:var(--az-panel); border:1px solid var(--az-line); border-radius:16px; padding:8px; box-shadow:0 24px 60px -18px rgba(0,0,0,.85); opacity:0; transform:translateY(-6px) scale(.98); transform-origin:top right; pointer-events:none; transition:opacity .2s var(--az-e), transform .2s var(--az-e); }
#azMenu.az-open{ opacity:1; transform:none; pointer-events:auto; }
#azMenu .az-menu-head{ padding:10px 12px 12px; border-bottom:1px solid var(--az-line); margin-bottom:6px; }
#azMenu .az-menu-name{ font:700 14px/1.2 "Space Grotesk","Inter",sans-serif; color:var(--az-text); }
#azMenu .az-menu-mail{ font:500 12px/1.3 "Inter",sans-serif; color:var(--az-dim); margin-top:3px; word-break:break-all; }
#azMenu button{ width:100%; display:flex; align-items:center; gap:10px; padding:10px 12px; border:0; background:transparent; color:var(--az-text); font:600 13px/1 "Inter",sans-serif; text-align:left; border-radius:10px; cursor:pointer; transition:background-color .16s var(--az-e), color .16s var(--az-e); }
#azMenu button:hover{ background:var(--az-panel-2); }
#azMenu button.az-danger:hover{ color:var(--az-bad); }
#azMenu button svg{ width:16px; height:16px; opacity:.7; flex:0 0 auto; }

/* ---------- Auth modal ---------- */
#azAuth{ position:fixed; inset:0; z-index:2147483002; display:grid; place-items:center; padding:20px; background:rgba(6,7,9,.66); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); opacity:0; pointer-events:none; transition:opacity .28s var(--az-e); }
#azAuth.az-open{ opacity:1; pointer-events:auto; }
#azAuth .az-card{ width:100%; max-width:420px; background:linear-gradient(180deg,var(--az-panel-2),var(--az-panel)); border:1px solid var(--az-line); border-radius:24px; padding:30px 28px; box-shadow:0 40px 100px -30px rgba(0,0,0,.9); transform:translateY(14px) scale(.97); transition:transform .32s var(--az-e); position:relative; overflow:hidden; }
#azAuth.az-open .az-card{ transform:none; }
#azAuth .az-card::before{ content:""; position:absolute; top:-40%; right:-30%; width:60%; height:120%; background:radial-gradient(closest-side,rgba(var(--az-y-rgb),.14),transparent); pointer-events:none; }
.az-brand{ display:flex; align-items:center; gap:9px; font:700 18px/1 "Space Grotesk","Inter",sans-serif; color:var(--az-text); margin-bottom:4px; }
.az-brand .az-dot{ width:9px; height:9px; border-radius:50%; background:var(--az-y); box-shadow:0 0 14px 2px rgba(var(--az-y-rgb),.7); }
.az-sub{ color:var(--az-dim); font:500 13px/1.5 "Inter",sans-serif; margin:0 0 20px; position:relative; }
.az-tabs{ display:flex; gap:4px; background:rgba(0,0,0,.28); border:1px solid var(--az-line); border-radius:12px; padding:4px; margin-bottom:18px; position:relative; }
.az-tabs button{ flex:1; padding:9px; border:0; background:transparent; color:var(--az-dim); font:600 13px/1 "Inter",sans-serif; border-radius:9px; cursor:pointer; transition:color .2s var(--az-e), background-color .2s var(--az-e); }
.az-tabs button.az-active{ color:var(--az-ink); background:var(--az-y); }
.az-field{ margin-bottom:14px; position:relative; }
.az-field label{ display:block; font:600 11px/1 "Inter",sans-serif; letter-spacing:.06em; text-transform:uppercase; color:var(--az-dim); margin-bottom:7px; }
.az-field input{ width:100%; box-sizing:border-box; padding:12px 14px; border-radius:12px; background:rgba(0,0,0,.28); border:1px solid var(--az-line); color:var(--az-text); font:500 14px/1 "Inter",sans-serif; transition:border-color .2s var(--az-e), box-shadow .2s var(--az-e); }
.az-field input:focus{ outline:none; border-color:rgba(var(--az-y-rgb),.6); box-shadow:0 0 0 4px rgba(var(--az-y-rgb),.14); }
.az-row2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.az-submit{ width:100%; margin-top:6px; padding:13px; border:0; border-radius:12px; background:linear-gradient(140deg,#fff36b,var(--az-y)); color:var(--az-ink); font:700 14px/1 "Space Grotesk","Inter",sans-serif; cursor:pointer; position:relative; overflow:hidden; transition:transform .18s var(--az-e), box-shadow .18s var(--az-e), filter .18s var(--az-e); }
.az-submit:hover{ transform:translateY(-1px); box-shadow:0 14px 30px -10px rgba(var(--az-y-rgb),.5); filter:brightness(1.02); }
.az-submit:active{ transform:translateY(0) scale(.99); }
.az-submit[disabled]{ opacity:.6; cursor:progress; }
.az-alt{ text-align:center; color:var(--az-dim); font:500 12.5px/1.5 "Inter",sans-serif; margin-top:16px; }
.az-alt b{ color:var(--az-y); cursor:pointer; }
.az-msg{ margin-top:14px; padding:11px 13px; border-radius:11px; font:500 12.5px/1.45 "Inter",sans-serif; display:none; }
.az-msg.az-show{ display:block; }
.az-msg.az-err{ background:rgba(255,92,92,.12); border:1px solid rgba(255,92,92,.3); color:#ff9d9d; }
.az-msg.az-good{ background:rgba(51,209,122,.12); border:1px solid rgba(51,209,122,.3); color:#83e6b4; }
.az-close{ position:absolute; top:16px; right:16px; width:32px; height:32px; border-radius:9px; border:1px solid var(--az-line); background:rgba(0,0,0,.25); color:var(--az-dim); cursor:pointer; display:grid; place-items:center; transition:color .18s var(--az-e), border-color .18s var(--az-e); z-index:2; }
.az-close:hover{ color:var(--az-text); border-color:rgba(var(--az-y-rgb),.4); }

/* ---------- Toast ---------- */
#azToasts{ position:fixed; z-index:2147483003; left:50%; bottom:26px; transform:translateX(-50%); display:flex; flex-direction:column; gap:10px; align-items:center; pointer-events:none; }
.az-toast{ display:flex; align-items:center; gap:10px; padding:12px 16px; border-radius:13px; background:var(--az-panel); border:1px solid var(--az-line); color:var(--az-text); font:600 13px/1.3 "Inter",sans-serif; box-shadow:0 18px 44px -16px rgba(0,0,0,.85); transform:translateY(16px); opacity:0; transition:transform .35s var(--az-e), opacity .35s var(--az-e); max-width:min(90vw,420px); }
.az-toast.az-in{ transform:none; opacity:1; }
.az-toast .az-tdot{ width:8px; height:8px; border-radius:50%; flex:0 0 auto; background:var(--az-y); }
.az-toast.az-t-ok .az-tdot{ background:var(--az-ok); }
.az-toast.az-t-bad .az-tdot{ background:var(--az-bad); }

/* ---------- Skeleton shimmer ---------- */
.az-skel{ position:relative; overflow:hidden; background:var(--az-panel); border:1px solid var(--az-line); border-radius:18px; min-height:150px; }
.az-skel::after{ content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent); animation:azShimmer 1.35s infinite; }
@keyframes azShimmer{ to{ transform:translateX(100%); } }

/* ---------- Save (heart) button on flight cards ---------- */
.az-save{ position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:10px; border:1px solid var(--az-line); background:rgba(0,0,0,.35); color:var(--az-dim); display:grid; place-items:center; cursor:pointer; transition:transform .2s var(--az-e), color .2s var(--az-e), border-color .2s var(--az-e), background-color .2s var(--az-e); z-index:3; }
.az-save:hover{ transform:scale(1.08); color:var(--az-y); border-color:rgba(var(--az-y-rgb),.45); }
.az-save.az-saved{ color:var(--az-y); border-color:rgba(var(--az-y-rgb),.55); background:rgba(var(--az-y-rgb),.12); }
.az-save svg{ width:17px; height:17px; }
.tarjeta-vuelo{ position:relative; }

/* Empty helper text injected into existing containers */
.az-empty{ text-align:center; color:var(--az-dim); font:500 14px/1.6 "Inter",sans-serif; padding:48px 20px; }
.az-empty b{ color:var(--az-text); display:block; font:700 16px/1.3 "Space Grotesk","Inter",sans-serif; margin-bottom:6px; }

@media (prefers-reduced-motion: reduce){ #azChip,#azMenu,#azAuth,#azAuth .az-card,.az-toast,.az-skel::after{ transition:none!important; animation:none!important; } }