/* ============================================================
   Hispatec launcher widget — floating pill + flag + fullscreen overlay
   Depends on: Open Sans (already loaded by app/app.css when the app
   mounts); until then the widget falls back to system-ui.
   ============================================================ */
:root{
  --hisp-green:#008996;
  --hisp-navy:#0d2537;
  --hisp-navy-soft:#1c3a52;
  --hisp-orange:#E85D26;
  --hisp-bg:#f4f8f7;
}

#hisp-launcher{
  position:fixed;
  bottom:16px;right:0px;
  width:0;height:96px;
  /* Max 32-bit signed int — matches the ceiling third-party widgets (e.g.
     Warmly) already claim in production, so the pill/flag never end up
     underneath one. Nothing can outrank this; only DOM order (the
     overlay is appended after the launcher, see launcher.js) breaks the
     tie so the fullscreen overlay still paints above the pill. */
  z-index:2147483647;
  font-family:'Open Sans', system-ui, sans-serif;
}
#hisp-launcher[aria-hidden="true"]{pointer-events:none;}

/* ── FLAG (behind) ─────────────────────────────────────────── */
.hisp-flag{
  position:absolute;top:50%;right:0;
  transform:translateY(-50%);
  width:36px;height:96px;
  background-image: linear-gradient(170.8deg, rgb(13, 37, 55) 0%, rgb(0, 137, 150) 100%);
  opacity:.9;
  border-radius:14px 0 0 14px;
  overflow:hidden;
  z-index:1;
  box-shadow:0 4px 20px rgba(13,37,55,0.18);
  transition:width .6s cubic-bezier(.34,1.4,.64,1),
             height .4s cubic-bezier(.34,1.4,.64,1),
             opacity .3s ease;
}
.hisp-flag::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--hisp-green);
}
#hisp-launcher[data-state="expanded"] .hisp-flag{
  width:280px;height:110px;opacity:1;
}
.hisp-flag-content{
  position:absolute;inset:0;
  padding:18px 20px 18px 38px;
  display:flex;flex-direction:column;justify-content:center;gap:10px;
  opacity:0;
  transition:opacity .4s ease;
}
#hisp-launcher[data-state="expanded"] .hisp-flag-content{
  opacity:1;transition-delay:.2s;
}
.hisp-flag-title{
  margin:0;color:#fff;font-size:14px;font-weight:500;line-height:1.3;padding-left: 4px;
  white-space:nowrap;
}
.hisp-flag-cta{
  display:inline-flex;align-items:center;gap:6px;
  align-self:flex-start;
  font-family:inherit;font-size:12px;font-weight:500;letter-spacing:.03em;text-transform: uppercase;
  color:#fff;background:transparent;
  border:1px solid rgba(255,255,255,.75);border-radius:999px;
  padding:6px 14px;cursor:pointer;
  transition:background .4s ease, border-color .3s ease;
}
.hisp-flag-cta:hover,.hisp-flag-cta:focus-visible{
  background:var(--hisp-orange);border-color:var(--hisp-orange);
}
.hisp-flag-cta-arrow::before{content:'↖';}
.hisp-flag-cta:hover .hisp-flag-cta-arrow::before,
.hisp-flag-cta:focus-visible .hisp-flag-cta-arrow::before{
  content:'↖';
}

/* ── PILL (front) ─────────────────────────────────────────────
   Same look as the #ihub hub icon from the original intro screen:
   white circle, dark navy contour, teal network icon, a subtle
   breathing "aura" ring, and a single (non-repeated) orbiting label. */
.hisp-pill{
  position:absolute;top:50%;right:16px;
  transform:translate(0,-50%);
  width:84px;height:84px;
  border-radius:50%;
  border:1px solid var(--hisp-navy);
  padding:0;cursor:pointer;
  background:#ffffff;
  box-shadow:0 4px 20px rgba(13,37,55,0.25);
  z-index:2;
  display:flex;align-items:center;justify-content:center;
  transition:transform .8s cubic-bezier(.34,1.4,.64,1);
}


#hisp-launcher[data-state="expanded"] .hisp-pill{
  transform:translate(-244px,-50%);
}
.hisp-pill:focus-visible{
  outline:2px solid var(--hisp-navy);outline-offset:3px;
}

/* .hisp-pill-aura{
  position:absolute;top:50%;left:50%;
  width:132%;height:132%;
  transform:translate(-50%,-50%) scale(1);
  border-radius:50%;
  border:2px solid rgba(0,137,150,.3);
  pointer-events:none;
  animation:hisp-pill-aura 2.5s ease-in-out infinite;
} */
@keyframes hisp-pill-aura{
  0%,100%{opacity:.45;transform:translate(-50%,-50%) scale(1);}
  50%{opacity:.08;transform:translate(-50%,-50%) scale(1.22);} 
}
.hisp-pill-icon{
  position:relative;width:50%;height:50%;pointer-events:none;
}
.hisp-pill-icon line,
.hisp-pill-icon circle{
  transition:stroke .25s ease, fill .25s ease;
}
.hisp-pill:hover .hisp-pill-icon line,
#hisp-launcher[data-state="expanded"] .hisp-pill-icon line{
  stroke:var(--hisp-orange);
}
.hisp-pill:hover .hisp-pill-icon circle,
#hisp-launcher[data-state="expanded"] .hisp-pill-icon circle{
  fill:var(--hisp-orange);
}
.hisp-pill-orbit{
  position:absolute;width:100%;height:100%;pointer-events:none;
  transform-box:fill-box;
}
.hisp-orbit-g{
  transform-origin:center;
  animation:hisp-orbit 16s linear infinite;
}
@keyframes hisp-orbit{to{transform:rotate(-360deg);}}
.hisp-pill-orbit text{
  font-size:13px;font-weight:500;letter-spacing:.15em;
  fill:rgba(13,37,55,.55);
  text-transform:uppercase;
}

/* ── MOBILE (≤768px): smaller pill, states 0/2 only ───────── */
@media(max-width:768px){
  #hisp-launcher{height:68px;}
  .hisp-flag{height:68px;}
  .hisp-pill{width:64px;height:64px;}
}

/* ── FULLSCREEN OVERLAY (Estat 2) ──────────────────────────── */
.hisp-overlay{
  /* Same ceiling as #hisp-launcher (2147483647 is the max) — being
     appended after it in the DOM (see launcher.js buildDom) is what makes
     it paint on top when both are visible. */
  position:fixed;inset:0;z-index:2147483647;
  background:rgba(13,37,55,.96);
  opacity:0;visibility:hidden;
  transform-origin:right center;
  transition:opacity .3s ease-out;
}
.hisp-overlay.is-open{
  opacity:1;visibility:visible;
}
.hisp-overlay-stage{
  position:absolute;inset:8px;
  border-radius:12px;
  overflow:hidden;
  background:var(--hisp-bg);
  transform:scale(.96);opacity:0;
  transition:transform .3s ease-out, opacity .3s ease-out;
}
.hisp-overlay.is-open .hisp-overlay-stage{
  transform:scale(1);opacity:1;
}
.hisp-overlay-root{position:absolute;inset:0;overflow:hidden;border-radius:8px;}
.hisp-overlay-close{
  /* Below the app's own #hdr (71px tall in practice) instead of sharing its
     row — mounting inside the header used to sit on top of the tagline
     text. Clear of the app's #lang-switch (fixed top:16/right:16) too,
     since that stays inside the header band above this button. */
  position:fixed;top:16px;right:16px;z-index:100000;
  width:40px;height:40px;border-radius:50%;
  border:none;
  background:none;color:rgba(13,37,55,.55);
  font-size:16px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .4s ease, transform .2s ease;
}
.hisp-overlay-close:hover,.hisp-overlay-close:focus-visible{
  background:rgba(13,37,55,.5);transform:scale(1.06);color:#fff;
}
@media(max-width:640px){
  .hisp-overlay-close{top:6px;right:6px;width:34px;height:34px;font-size:14px;}
}
@media(max-width:768px){
  .hisp-overlay-stage{inset:0;border-radius:0;}
  .hisp-overlay-root{border-radius:0;}
}
@media(max-height:500px) and (orientation:landscape){
  .hisp-overlay-close{top:6px;right:12px;width:34px;height:34px;font-size:14px;}
  body:has(#maparea.has-lp) .hisp-overlay-close{display:none;}
}

/* Fallback shown inside the overlay if the app fails to load (network/CSP/404) */
.hisp-load-error{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  padding:24px;text-align:center;
  color:var(--hisp-navy);
  font-family:'Open Sans', system-ui, sans-serif;
}
.hisp-load-error p{margin:0;font-size:15px;font-weight:600;}
.hisp-load-retry{
  font-family:inherit;font-size:13px;font-weight:700;
  color:#fff;background:var(--hisp-green);
  border:none;border-radius:999px;padding:10px 22px;cursor:pointer;
  transition:background .2s ease;
}
.hisp-load-retry:hover,.hisp-load-retry:focus-visible{background:var(--hisp-navy);}

/* ── prefers-reduced-motion ─────────────────────────────────── */
@media(prefers-reduced-motion: reduce){
  .hisp-orbit-g,.hisp-pill-aura{animation:none;}
  .hisp-flag,.hisp-flag-content,.hisp-pill,
  .hisp-overlay,.hisp-overlay-stage,.hisp-overlay-close{
    transition:none !important;
  }
}