/* =========================================================
   GUIA MIGRANTE PT — UX V3
   Camada comum de experiência, mobile-first
   ========================================================= */

:root{
  --ux-bottom-h:72px;
  --ux-overlay:rgba(15,23,42,.62);
}

body.ux-large-text{font-size:112%}
body.ux-high-contrast{
  --brand:#12327d;
  --brand-dark:#07183d;
  --text:#020617;
  --muted:#3f4b5c;
  --line:#b8c4d3;
}
body.ux-lock{overflow:hidden}

/* Header helpers */
.ux-header-search{
  display:none;
  width:40px;height:40px;
  border:1px solid var(--line);
  background:white;
  color:var(--brand-dark);
  border-radius:11px;
  align-items:center;justify-content:center;
}
.ux-header-search:hover{background:var(--brand-soft);color:var(--brand)}

/* Mobile bottom navigation */
.ux-bottom-nav{
  position:fixed;
  z-index:80;
  left:0;right:0;bottom:0;
  min-height:var(--ux-bottom-h);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(18px);
  border-top:1px solid var(--line);
  box-shadow:0 -10px 28px rgba(15,23,42,.08);
  padding:6px max(8px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
}
.ux-bottom-nav a,.ux-bottom-nav button{
  border:0;background:transparent;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:3px;
  min-height:54px;
  border-radius:11px;
  color:#64748b;
  font-size:.65rem;
  font-weight:800;
}
.ux-bottom-nav svg{width:21px;height:21px}
.ux-bottom-nav .active,
.ux-bottom-nav a:hover,
.ux-bottom-nav button:hover{
  color:var(--brand);
  background:var(--brand-soft);
}

/* Search overlay */
.ux-overlay{
  position:fixed;inset:0;z-index:200;
  display:none;
  background:var(--ux-overlay);
  padding:12px;
}
.ux-overlay.open{display:flex}
.ux-dialog{
  width:min(100%,720px);
  max-height:min(86vh,760px);
  margin:4vh auto auto;
  background:white;
  border-radius:22px;
  box-shadow:0 28px 80px rgba(15,23,42,.28);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.ux-dialog-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 16px;
  border-bottom:1px solid var(--line);
}
.ux-dialog-head strong{color:var(--brand-dark);font-size:.95rem}
.ux-close{
  width:38px;height:38px;border:1px solid var(--line);border-radius:10px;
  background:white;color:var(--brand-dark);font-size:1.3rem
}
.ux-search-box{
  display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;
  margin:14px;
  padding:11px 13px;
  border:1px solid #cbd5e1;border-radius:13px;background:#fff;
}
.ux-search-box:focus-within{border-color:#60a5fa;box-shadow:0 0 0 3px rgba(37,99,235,.08)}
.ux-search-box input{border:0;outline:0;width:100%;font:inherit;color:var(--text);background:transparent}
.ux-search-results{
  overflow:auto;
  padding:0 12px 15px;
}
.ux-result{
  display:grid;
  grid-template-columns:39px 1fr auto;
  gap:11px;
  align-items:center;
  padding:12px;
  border-radius:13px;
  border:1px solid transparent;
}
.ux-result:hover{background:var(--brand-soft);border-color:#dbeafe}
.ux-result-icon{
  width:38px;height:38px;border-radius:11px;
  display:grid;place-items:center;
  background:var(--brand-soft);color:var(--brand);font-weight:900;font-size:.72rem
}
.ux-result strong{display:block;color:var(--brand-dark);font-size:.82rem}
.ux-result span{display:block;color:var(--muted);font-size:.72rem;margin-top:2px}
.ux-result-arrow{color:#94a3b8}
.ux-no-results{
  text-align:center;padding:28px 16px;color:var(--muted);font-size:.82rem
}
.ux-search-hints{
  padding:0 14px 12px;
  display:flex;gap:7px;flex-wrap:wrap
}
.ux-search-hints button{
  border:1px solid var(--line);background:var(--bg);border-radius:999px;
  padding:6px 9px;color:#475569;font-size:.69rem;font-weight:800
}

/* Accessibility sheet */
.ux-tools-row{
  display:flex;gap:8px;flex-wrap:wrap;padding:0 14px 14px
}
.ux-mini-action{
  border:1px solid var(--line);background:white;color:#475569;
  border-radius:10px;padding:8px 10px;font-size:.72rem;font-weight:850
}

/* Homepage intent UX */
.ux-intent-section{
  padding:54px 0;
  background:white;
}
.ux-intent-head{
  display:flex;flex-direction:column;gap:9px;margin-bottom:20px
}
.ux-intent-head .ux-kicker{
  color:var(--brand);text-transform:uppercase;letter-spacing:.09em;
  font-size:.7rem;font-weight:900
}
.ux-intent-head h2{
  margin:0;color:var(--brand-dark);
  font-size:clamp(1.9rem,8vw,3rem);line-height:1.04;letter-spacing:-.043em
}
.ux-intent-head p{margin:0;color:var(--muted);max-width:720px;font-size:.87rem}
.ux-intent-grid{
  display:grid;grid-template-columns:1fr;gap:10px
}
.ux-intent-card{
  border:1px solid var(--line);background:var(--bg);border-radius:15px;padding:15px;
  display:grid;grid-template-columns:42px 1fr auto;gap:11px;align-items:center;
  text-align:left;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease
}
.ux-intent-card:hover{
  transform:translateY(-2px);border-color:#bfdbfe;box-shadow:var(--shadow-sm)
}
.ux-intent-icon{
  width:41px;height:41px;border-radius:12px;display:grid;place-items:center;
  background:white;color:var(--brand);font-size:1rem;font-weight:900;
  box-shadow:0 5px 14px rgba(15,23,42,.05)
}
.ux-intent-card strong{display:block;color:var(--brand-dark);font-size:.83rem}
.ux-intent-card span{display:block;color:var(--muted);font-size:.71rem;margin-top:2px}
.ux-intent-card .arrow{color:#94a3b8;font-size:1.05rem}

/* Guided route modal */
.ux-guide-progress{
  display:flex;gap:6px;padding:14px 16px 0
}
.ux-guide-progress i{
  flex:1;height:5px;border-radius:999px;background:var(--line)
}
.ux-guide-progress i.done{background:var(--brand)}
.ux-guide-body{padding:18px 16px;overflow:auto}
.ux-guide-body h2{margin:0;color:var(--brand-dark);font-size:1.25rem;line-height:1.15}
.ux-guide-body>p{margin:7px 0 16px;color:var(--muted);font-size:.78rem}
.ux-guide-choices{display:grid;gap:8px}
.ux-guide-choice{
  width:100%;border:1px solid var(--line);background:white;border-radius:12px;
  padding:12px;text-align:left;color:var(--brand-dark);font-weight:800;font-size:.79rem
}
.ux-guide-choice:hover,.ux-guide-choice.selected{border-color:#93c5fd;background:var(--brand-soft)}
.ux-guide-actions{display:flex;justify-content:space-between;gap:8px;padding:13px 16px;border-top:1px solid var(--line)}
.ux-guide-actions button{
  border:1px solid var(--line);background:white;border-radius:10px;
  padding:9px 12px;font-size:.75rem;font-weight:850;color:var(--brand)
}
.ux-guide-actions .primary{background:var(--brand);color:white;border-color:var(--brand)}
.ux-guide-result{
  display:grid;gap:9px;margin-top:13px
}
.ux-guide-step{
  display:grid;grid-template-columns:31px 1fr;gap:9px;align-items:start;
  border:1px solid var(--line);border-radius:11px;background:var(--bg);padding:10px
}
.ux-guide-step b{
  width:29px;height:29px;border-radius:9px;display:grid;place-items:center;
  background:var(--brand);color:white;font-size:.68rem
}
.ux-guide-step strong{display:block;color:var(--brand-dark);font-size:.77rem}
.ux-guide-step span{display:block;color:var(--muted);font-size:.69rem;margin-top:2px}
.ux-guide-step a{color:var(--brand);font-weight:850}

/* Local progress */
.ux-progress-card{
  margin:18px 0 0;
  border:1px solid var(--line);
  background:white;
  border-radius:15px;
  padding:14px;
  display:none;
  box-shadow:var(--shadow-sm)
}
.ux-progress-card.show{display:block}
.ux-progress-top{display:flex;justify-content:space-between;gap:12px;align-items:center}
.ux-progress-top strong{color:var(--brand-dark);font-size:.81rem}
.ux-progress-top a{color:var(--brand);font-size:.71rem;font-weight:850}
.ux-progress-track{height:8px;background:var(--line);border-radius:999px;overflow:hidden;margin-top:9px}
.ux-progress-fill{height:100%;background:var(--brand);width:0}
.ux-progress-copy{margin-top:6px;color:var(--muted);font-size:.69rem}

/* Quick share */
.ux-share{
  position:fixed;z-index:72;
  right:14px;bottom:calc(var(--ux-bottom-h) + 12px);
  width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line);background:white;color:var(--brand);
  display:grid;place-items:center;box-shadow:0 8px 26px rgba(15,23,42,.12)
}

/* Toast */
.ux-toast{
  position:fixed;z-index:300;left:12px;right:12px;bottom:calc(var(--ux-bottom-h) + 14px);
  background:var(--brand-dark);color:white;border-radius:12px;padding:11px 13px;
  box-shadow:0 14px 40px rgba(15,23,42,.25);font-size:.75rem;font-weight:750;
  transform:translateY(20px);opacity:0;pointer-events:none;transition:.2s ease
}
.ux-toast.show{transform:translateY(0);opacity:1}

/* Install card */
.ux-install-card{
  display:none;margin:15px 0 0;border:1px solid #bfdbfe;background:var(--brand-soft);
  border-radius:14px;padding:13px
}
.ux-install-card.show{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}
.ux-install-card strong{display:block;color:var(--brand-dark);font-size:.78rem}
.ux-install-card span{display:block;color:var(--muted);font-size:.69rem;margin-top:2px}
.ux-install-card button{
  border:0;background:var(--brand);color:white;border-radius:9px;padding:8px 10px;font-size:.7rem;font-weight:850
}

/* Desktop */
@media(min-width:700px){
  .ux-intent-grid{grid-template-columns:1fr 1fr}
}
@media(min-width:980px){
  body{padding-bottom:0!important}
  .ux-bottom-nav{display:none}
  .ux-share{bottom:18px}
  .ux-header-search{display:flex}
  .ux-intent-grid{grid-template-columns:repeat(3,1fr)}
  .ux-intent-card{grid-template-columns:42px 1fr}
  .ux-intent-card .arrow{display:none}
  .ux-dialog{margin-top:8vh}
}
@media(max-width:979px){
  body{padding-bottom:calc(var(--ux-bottom-h) + 6px)}
}
@media(prefers-reduced-motion:reduce){
  .ux-intent-card,.ux-toast{transition:none}
}