/* Mapa do Programa - Itrio Consultoria
   Estilos externos (sem inline) para respeitar a politica de conteudo (_headers). */
  :root{ --azul:#1E3A63; --cinza:#3E4854; --linha:#9AA7B2; }
  *{ box-sizing:border-box; }
  html,body{ margin:0; height:100%; font-family:"Segoe UI",Calibri,Arial,sans-serif; color:#2b2b2b; background:#EAEEF3; -webkit-text-size-adjust:100%; }
  #app{ display:flex; flex-direction:column; height:100%; }
  header{ background:var(--azul); color:#fff; padding:10px 16px; display:flex; align-items:center; gap:14px; flex:0 0 auto; }
  .brand{ font-weight:700; letter-spacing:3px; font-size:20px; }
  .brand small{ display:block; font-weight:400; letter-spacing:2px; font-size:10px; opacity:.85; }
  header h1{ font-size:15px; font-weight:600; margin:0; line-height:1.25; }
  header h1 span{ display:block; font-weight:400; font-size:11px; opacity:.85; }
  .right{ margin-left:auto; display:flex; align-items:center; gap:14px; }
  .hint{ font-size:11px; opacity:.9; max-width:280px; text-align:right; line-height:1.45; }
  .cta{ background:#fff; color:var(--azul); text-decoration:none; font-weight:700; font-size:13px; padding:9px 16px; border-radius:8px; white-space:nowrap; }
  .cta:hover{ background:#16294A; color:#fff; }
  main{ position:relative; flex:1 1 auto; overflow:hidden; }
  svg{ width:100%; height:100%; display:block; cursor:grab; background:#EAEEF3; touch-action:none; -webkit-user-select:none; user-select:none; }
  svg.drag{ cursor:grabbing; }
  .controls{ position:absolute; left:12px; bottom:12px; display:flex; gap:6px; flex-wrap:wrap; z-index:5; }
  .controls button{ font-family:inherit; font-size:12px; border:1px solid var(--linha); background:#fff; color:var(--azul); padding:7px 11px; border-radius:7px; cursor:pointer; }
  .controls button:hover{ background:var(--azul); color:#fff; border-color:var(--azul); }
  #panel{ position:absolute; top:12px; right:12px; width:330px; max-width:calc(100% - 24px); max-height:calc(100% - 24px); overflow:auto; background:#fff; border:1px solid var(--linha); border-radius:12px; box-shadow:0 6px 24px rgba(0,0,0,.14); padding:14px 16px; display:none; z-index:6; }
  #panel.show{ display:block; }
  #panel .bar{ height:5px; border-radius:3px; margin:-14px -16px 12px; }
  #panel .kicker{ font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:#4A5663; margin:0 0 2px; }
  #panel h3{ margin:0 0 8px; font-size:16px; color:var(--azul); }
  #panel p{ margin:7px 0; font-size:12.5px; line-height:1.55; }
  #panel b{ color:#1d1d1d; }
  #panel .pcta{ display:inline-block; margin-top:8px; background:var(--azul); color:#fff; text-decoration:none; font-weight:700; font-size:12.5px; padding:9px 16px; border-radius:8px; }
  #panel .close{ position:absolute; top:8px; right:10px; border:none; background:none; font-size:20px; cursor:pointer; color:#888; line-height:1; }
  footer{ flex:0 0 auto; background:#fff; border-top:1px solid #e3e7ec; color:var(--cinza); font-size:11px; padding:7px 16px; text-align:center; }
  text{ font-family:"Segoe UI",Calibri,Arial,sans-serif; }
  @media (max-width:640px){
    header{ flex-wrap:wrap; gap:8px 12px; padding:9px 12px; }
    .brand{ font-size:17px; }
    .right{ width:100%; order:3; justify-content:space-between; gap:8px; }
    header h1{ font-size:13px; order:2; }
    header h1 span{ font-size:10px; }
    .hint{ display:none; }
    .controls{ left:8px; bottom:auto; top:8px; gap:5px; }
    .controls button{ padding:8px 10px; font-size:12px; }
    #panel{ left:0; right:0; bottom:0; top:auto; width:100%; max-width:none; max-height:62%; border-radius:16px 16px 0 0; }
  }
  /* integracao ao site institucional */
  .hit{ cursor:pointer; }
  .npe{ pointer-events:none; }
  .hbrand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:#fff; }
  .hbrand img{ display:block; }
  .back{ color:#fff; text-decoration:none; font-size:13px; border:1px solid rgba(255,255,255,.55); padding:8px 12px; border-radius:8px; white-space:nowrap; }
  .back:hover{ background:rgba(255,255,255,.10); border-color:#fff; }
  .skip{ position:absolute; left:-9999px; top:auto; background:#1E3A63; color:#fff; padding:10px 14px; border-radius:0 0 8px 0; z-index:20; text-decoration:none; }
  .skip:focus{ left:0; top:0; }
  @media (max-width:640px){ .back{ font-size:12px; padding:7px 10px; } }