/* ==========================================================================
   responsivo.css — camada de responsividade do site
   Entra POR ÚLTIMO em cada página. É aditiva: remover o <link> devolve o
   layout exatamente como estava.

   Por que ela existe: as páginas já tinham media queries para as grades, e
   nenhuma funcionava. O seletor procurava `repeat(4,1fr)` sem espaço, que é
   como está escrito no código — mas o estilo vai para o React como objeto, e o
   navegador reserializa o atributo COM espaço: `repeat(4, 1fr)`. Conferido na
   produção: `[style*="repeat(4,1fr)"]` casava com zero elementos.

   Resultado: a 375px a home mantinha grades de 4, 5 e 6 colunas — células de
   94, 65 e 55 pixels.
   ========================================================================== */

/* ---- 1. GRADES ---------------------------------------------------------
   Sempre as DUAS grafias. A sem espaço cobre CSS escrito à mão no HTML; a com
   espaço cobre o que o navegador serializa a partir do estilo do React.
   Sem `!important` o estilo inline ganharia — ele é mais específico que
   qualquer seletor. */

@media (max-width: 900px) {
  [style*="repeat(6,1fr)"], [style*="repeat(6, 1fr)"],
  [style*="repeat(5,1fr)"], [style*="repeat(5, 1fr)"],
  [style*="repeat(4,1fr)"], [style*="repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  [style*="repeat(3,1fr)"], [style*="repeat(3, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 760px) {
  [style*="repeat(6,1fr)"], [style*="repeat(6, 1fr)"],
  [style*="repeat(5,1fr)"], [style*="repeat(5, 1fr)"],
  [style*="repeat(4,1fr)"], [style*="repeat(4, 1fr)"],
  [style*="repeat(3,1fr)"], [style*="repeat(3, 1fr)"],
  [style*="repeat(2,1fr)"], [style*="repeat(2, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
  /* Colunas declaradas em fração fixa (ex.: "1.5fr 1fr 1fr auto") também
     esmagam em tela estreita. Empilhar é melhor que quatro colunas de 60px. */
  [style*="grid-template-columns:1.5fr"], [style*="grid-template-columns: 1.5fr"],
  [style*="grid-template-columns:2fr"], [style*="grid-template-columns: 2fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* Grade que se adapta sozinha (minmax) não precisa de ajuda — mas o mínimo
   pode passar da tela. Deixa encolher em vez de estourar. */
@media (max-width: 480px) {
  [style*="minmax("] { grid-template-columns: 1fr !important; }
}

/* ---- 2. MENU -----------------------------------------------------------
   Até 1000px os links saem da barra e passam a viver num painel que abre pelo
   botão. Acima disso nada muda: o desktop continua idêntico. */

.nav-burger { display: none; }

@media (max-width: 1000px) {
  .nav-burger {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    flex: none;
    border: 1px solid var(--border, #d8dde5);
    border-radius: 11px;
    background: var(--surface, #fff);
    color: var(--text, #101418);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
  }

  /* Fechado: fora da barra. `display:none` em vez de altura zero para o leitor
     de tela não anunciar link que ninguém alcança. */
  nav .nav-links { display: none !important; }

  /* Aberto: painel abaixo da barra, ocupando a largura inteira. */
  nav[data-open="1"] .nav-links {
    display: flex !important;
    flex: 1 1 100% !important;
    order: 9 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 2px !important;
    margin: 12px 0 4px !important;
    padding-top: 12px;
    border-top: 1px solid var(--border, #d8dde5);
  }
  nav[data-open="1"] .nav-links > a {
    padding: 12px 4px;
    font-size: 14px;
  }

  /* A barra precisa poder crescer para o painel caber embaixo. */
  nav { flex-wrap: wrap !important; }
}

/* ---- 3. O QUE ESTOURA A LARGURA ---------------------------------------- */

@media (max-width: 760px) {
  /* Rolagem lateral da PÁGINA é sempre defeito: some com o conteúdo à direita
     sem avisar que ele existe. Tabela larga rola dentro do próprio quadro. */
  html, body { overflow-x: hidden; }

  /* Cartão com largura mínima maior que a tela é o que costuma empurrar. */
  [style*="min-width:200px"], [style*="min-width: 200px"],
  [style*="min-width:220px"], [style*="min-width: 220px"],
  [style*="min-width:260px"], [style*="min-width: 260px"],
  [style*="min-width:300px"], [style*="min-width: 300px"] {
    min-width: 0 !important;
  }

  /* Títulos gigantes do topo quebram a linha em vez de furar a margem. */
  h1, h2 { overflow-wrap: anywhere; }
}

/* ---- Campo de WhatsApp com o DDI já preenchido -----------------------------

   O número chega ao servidor normalizado com 55 na frente, e quem digita nem
   sempre sabe disso: uns põem "+55", outros começam no DDD, outros mandam
   "(54) 9...". Cada forma diferente é uma conta que não casa com a instalação
   depois, porque o vínculo é pelo número.

   Mostrar o DDI como parte do campo resolve antes de virar problema: fica
   claro que o 55 já está posto e que o que falta é DDD + número.

   A bandeira é um SVG embutido, não o emoji 🇧🇷. No Windows o emoji de
   bandeira não existe na fonte do sistema e sai como as letras "BR" dentro de
   dois quadrados — pareceria defeito justamente na plataforma que a maioria
   dos assinantes usa. */
.gr-ddi { position: relative; display: block; }
.gr-ddi__ddi {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; color: var(--muted);
  /* Sem isto, clicar em cima do prefixo não põe o cursor no campo — e o
     usuário conclui que o campo está travado. */
  pointer-events: none; user-select: none;
}
.gr-ddi__ddi::before {
  content: ""; width: 21px; height: 15px; border-radius: 3px; flex: none;
  box-shadow: 0 0 0 1px rgba(0,0,0,.10);
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2028%2020%22%3E%3Crect%20width%3D%2228%22%20height%3D%2220%22%20rx%3D%222.5%22%20fill%3D%22%23009b3a%22%2F%3E%3Cpath%20d%3D%22M14%202.8%2025.2%2010%2014%2017.2%202.8%2010Z%22%20fill%3D%22%23fedf00%22%2F%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%2210%22%20r%3D%224.1%22%20fill%3D%22%23002776%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
}
/* O recuo abre espaço para o prefixo. `!important` porque os campos destas
   telas trazem o padding no atributo style — e style inline ganha da folha. */
.gr-ddi input { padding-left: 78px !important; width: 100%; }


/* ---- Instituições: mural e lista ----
   Vive aqui, e não na página, porque a aba do Gestor Master é quem usa. */
/* Quatro por linha é o pedido, e é o que cabe num monitor de trabalho. Abaixo
   disso o cartão viraria uma tira ilegível — então cai para dois e depois um.
   A grade da LISTA não entra aqui: ela já é de uma coluna por natureza. */
.ies-grade{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:1100px){.ies-grade{grid-template-columns:repeat(3,1fr)}}
@media (max-width:860px){.ies-grade{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.ies-grade{grid-template-columns:1fr}}
.ies-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px;min-width:0}
/* Instituição fechada a cadastro fica visivelmente diferente. Sem isso, num
   mural de quinze cartões iguais, descobrir qual está aberta exige ler quinze
   selos — e o erro que isso causa é abrir a porta errada. */
.ies-card--fechada{opacity:.72;border-style:dashed}
.ies-logo{width:100%;height:78px;border-radius:11px;border:1px solid var(--border);background:var(--surface2);display:grid;place-items:center;overflow:hidden}
.ies-logo img{max-width:100%;max-height:100%;object-fit:contain}
.ies-nome{font-weight:700;font-size:14px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ies-slug{font-size:11px;color:var(--faint);font-family:ui-monospace,Menlo,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ies-meta{font-size:11.5px;color:var(--muted);line-height:1.35}
.ies-selo{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:4px 9px;border-radius:999px;white-space:nowrap}
.ies-btn{background:var(--surface2);border:1px solid var(--border);color:var(--text);cursor:pointer;font-weight:700;font-size:12px;padding:7px 11px;border-radius:9px;white-space:nowrap}
.ies-btn:hover{border-color:var(--accent)}
.ies-btn--p{background:var(--accent);color:#fff;border-color:var(--accent)}
.ies-in{padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface2);color:var(--text);font-size:13px;outline:none;width:100%}
.ies-chip{cursor:pointer;font-size:11.5px;font-weight:600;padding:6px 11px;border-radius:999px;border:1px solid var(--border);background:var(--surface2);color:var(--muted)}
.ies-chip--on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink)}
.ies-linha{display:grid;grid-template-columns:44px 1.6fr 1.1fr auto;gap:12px;align-items:center;padding:11px 0;border-top:1px solid var(--border);min-width:0}
@media (max-width:760px){.ies-linha{grid-template-columns:44px 1fr;gap:8px}}
.ies-modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:grid;place-items:center;z-index:90;padding:16px}
.ies-modal__cx{background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);width:100%;max-width:640px;max-height:90vh;overflow:auto;padding:20px 22px}