/* ==========================================================================
   TELA MILAGRES - CSS Responsivo
   Garante que index.html, edc1.html, edc2.html e edc3.html
   fiquem 100% utilizáveis em mobile e tablet.
   ========================================================================== */

* { box-sizing: border-box; }

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
}

/* ====================================================================
   RODAPÉ — correções gerais (desktop + mobile)
   O CSS original fixava #rodapeCentro em height:225px, o que cortava o
   texto; além disso o <td> não herdava a cor branca, deixando o texto
   cinza-escuro e ilegível contra o fundo. Aqui forçamos cor, altura
   automática e espaçamento consistente.
   ==================================================================== */
#rodape {
  background-color: #2b2b2b;
  padding: 25px 0 20px !important;
  overflow: hidden;
}
#rodapeCentro {
  height: auto !important;
  min-height: 0 !important;
  padding-bottom: 10px;
}
#rodapeCentro,
#rodapeCentro .copyright,
#rodapeCentro .copyright *,
#rodapeCentro .endereco_novo,
#rodapeCentro table,
#rodapeCentro td,
#rodapeCentro strong,
#rodapeCentro a {
  color: #ffffff !important;
}
#rodapeCentro a { text-decoration: none; }
#rodapeCentro a:hover { text-decoration: underline; }
#rodapeCentro table { border-collapse: separate; border-spacing: 0; }
#rodapeCentro td {
  padding: 0 14px 6px 0;
  font-size: 12px;
  line-height: 1.55;
  vertical-align: top;
}
#rodapeCentro strong {
  display: inline-block;
  margin-bottom: 2px;
  font-size: 12.5px;
  letter-spacing: .2px;
}
.copyright {
  width: 700px !important;
  max-width: 72% !important;
  margin-top: 5px !important;
  line-height: 1.55;
}
.endereco_novo {
  margin-top: 10px !important;
  margin-bottom: 15px !important;
}

/* ---------- Correção da paginação do banner (1 2 3 4) ----------
   O CSS original limita #nav a 20px de altura com overflow:hidden,
   cortando os botões. Aqui forçamos altura automática e os botões
   ficam abaixo do banner, totalmente visíveis. */
#nav {
  height: auto !important;
  overflow: visible !important;
  position: static !important;
  text-align: center !important;
  padding: 8px 0 4px !important;
}
#nav ul {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
#nav ul li {
  float: none !important;
  display: inline-block;
  min-width: 28px;
  height: auto !important;
  line-height: 1 !important;
  padding: 6px 10px !important;
  background-color: #AEAEAE;
  color: #222;
  font-weight: bold;
  font-size: 13px;
  border-radius: 3px;
  margin: 0 !important;
  cursor: pointer;
  transition: background-color .15s ease;
}
#nav ul li:hover { background-color: #8a8a8a; color: #fff; }
#nav ul li.opac { background-color: #194360; color: #fff; }

/* O #banner tinha height fixo 180px; ajustamos para caber o #nav abaixo */
#banner {
  height: auto !important;
  padding-bottom: 10px !important;
}

/* ---------- Tablet (≤ 980px) ---------- */
@media screen and (max-width: 980px) {

  /* Containers principais */
  #topo, #menu, #centro, #rodape { width: 100% !important; }
  #topoCentro, #menuCentro, #centroCentro, #rodapeCentro {
    width: 100% !important;
    max-width: 100%;
    height: auto !important;
    padding: 0 10px;
  }

  /* Topo */
  #topo { height: auto !important; padding-bottom: 10px; }
  #topoCentro img { max-width: 100%; height: auto; display: block; margin: 0 auto; }
  .atendimentoOnline { position: static !important; margin: 10px auto; text-align: center; }

  /* Menu superior - quebra em múltiplas linhas */
  #menuCentro ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 8px 0;
  }
  #menuCentro ul li {
    float: none !important;
    margin: 4px 6px !important;
  }
  #menuCentro ul li a {
    font-size: 14px !important;
    padding: 4px 6px !important;
    display: inline-block;
  }

  /* Banner rotativo (#tv) */
  #tv, #banner {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    float: none !important;
  }
  #tv img { max-width: 100%; height: auto; }
  #nav { position: static !important; text-align: center; }
  #nav ul { display: flex; flex-wrap: wrap; justify-content: center; }
  #nav ul li { float: none !important; }
  #nav img { width: 90px !important; height: 56px !important; }

  /* Banners absolutos apDiv1 / apDiv2 (popups) */
  #apDiv1, #apDiv2 {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    top: auto !important;
    left: auto !important;
  }
  #apDiv1 img, #apDiv2 img { width: 100% !important; height: auto !important; }

  /* Colunas - empilhar verticalmente */
  #colEsq, #colDir {
    float: none !important;
    width: 100% !important;
    margin-top: 15px !important;
    padding: 0 !important;
  }

  /* Rodapé */
  #rodape { padding: 20px 14px !important; }
  #rodapeCentro {
    padding: 0 !important;
    height: auto !important;
  }
  .logoRodape, .copyright, .endereco_novo {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 10px auto !important;
    text-align: center !important;
  }
  #rodapeCentro td {
    padding: 4px 0 !important;
    text-align: center !important;
  }
  #rodapeCentro strong { font-size: 13px; }
  #rodapeCentro map { display: none; }
  #rodapeCentro img { max-width: 100%; height: auto; }

  /* Tabelas com width fixo → fluido */
  table[width] { width: 100% !important; max-width: 100%; }
  td[width] { width: auto !important; }

  /* Inputs/selects – largura fluida */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  select,
  textarea {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box;
  }
  input[size] { width: 100% !important; }

  /* Select "cargo" com inline width:860px */
  #cargo, select[style*="width:860px"], select[style*="width: 860px"] {
    width: 100% !important;
  }

  /* Botões */
  input[type="submit"], input[type="reset"], button {
    width: auto !important;
    min-width: 110px;
    padding: 8px 14px;
    font-size: 14px;
  }

  /* Tabbed Panels (Spry) - em mobile empilhar abas */
  .TabbedPanelsTabGroup {
    display: flex;
    flex-wrap: wrap;
  }
  .TabbedPanelsTab {
    flex: 1 1 auto;
    text-align: center;
    font-size: 13px;
    padding: 8px 6px !important;
  }
  .TabbedPanelsContent { padding: 8px !important; }
}

/* ---------- Mobile (≤ 640px) ---------- */
@media screen and (max-width: 640px) {

  body { font-size: 13px; }

  #menuCentro ul li a {
    font-size: 13px !important;
    padding: 3px 5px !important;
  }

  h1 { font-size: 20px; }
  h2 { font-size: 17px; }
  h3, h3.tit { font-size: 15px; }

  .bloco { padding: 10px !important; }

  /* Tabelas de formulário: cada linha vira um bloco,
     cada célula vira uma linha — tudo empilhado. */
  form[name="formInsc"] table,
  form[name="formInsc"] tbody,
  form[name="formInsc"] tr,
  form[name="formInsc"] td,
  form[name="formCPF"] table,
  form[name="formCPF"] tbody,
  form[name="formCPF"] tr,
  form[name="formCPF"] td {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  form[name="formInsc"] td,
  form[name="formCPF"] td {
    padding: 6px 4px !important;
    text-align: left !important;
  }

  /* Remove paddings laterais grandes em tables internas */
  table[cellpadding] td { padding: 6px 4px !important; }

  /* Tabelas de listagem de concursos — permite que a miniatura quebre abaixo do título */
  .bloco table tr, .bloco table td {
    display: block !important;
    width: 100% !important;
  }
  .bloco table td div[style*="width:64px"] {
    width: 80px !important;
    height: 60px !important;
    margin: 0 0 6px 0 !important;
  }

  /* ===========================================================
     TABELA DE CARGOS (editais) — força formato tabular + scroll
     horizontal em mobile, sobrepondo a regra de empilhamento de
     ".bloco table" acima.

     Detecção CSS-only via :has() (suportado em todos os browsers
     modernos desde 2023). Não depende de JS, então funciona mesmo
     se houver cache antigo do milagres-api.js.

     Estratégia: a própria <table> vira block com overflow-x; o
     <tbody> interno vira display:table com largura intrínseca,
     fazendo o conteúdo rolar horizontalmente. Funciona sem wrapper.
     =========================================================== */

  /* Aceita tanto a classe (se o JS rodou) quanto a detecção pura via :has() */
  .bloco table:has(td.Arial-11-Negrito),
  table.tabela-cargos-milagres,
  .tabela-cargos-wrap > table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border: 1px solid #e2e2e2 !important;
    border-radius: 4px;
    margin: 8px 0 12px !important;
    background: #fff;
    border-collapse: collapse !important;
    font-size: 11px !important;
  }
  .bloco table:has(td.Arial-11-Negrito)::-webkit-scrollbar,
  table.tabela-cargos-milagres::-webkit-scrollbar { height: 8px; }
  .bloco table:has(td.Arial-11-Negrito)::-webkit-scrollbar-thumb,
  table.tabela-cargos-milagres::-webkit-scrollbar-thumb {
    background: #c0c0c0; border-radius: 4px;
  }

  /* O tbody vira a "tabela visual" com largura intrínseca para forçar o scroll */
  .bloco table:has(td.Arial-11-Negrito) > tbody,
  table.tabela-cargos-milagres > tbody {
    display: table !important;
    width: max-content !important;
    min-width: 100% !important;
    table-layout: auto !important;
  }
  .bloco table:has(td.Arial-11-Negrito) > tbody > tr,
  table.tabela-cargos-milagres > tbody > tr {
    display: table-row !important;
    width: auto !important;
  }
  .bloco table:has(td.Arial-11-Negrito) > tbody > tr > td,
  table.tabela-cargos-milagres > tbody > tr > td {
    display: table-cell !important;
    width: auto !important;
    min-width: 56px;
    max-width: 260px;
    padding: 6px 8px !important;
    vertical-align: top !important;
    text-align: left !important;
    white-space: normal !important;
    line-height: 1.35 !important;
    border-bottom: 1px solid #ececec;
    box-sizing: border-box;
  }
  /* Cabeçalho da tabela */
  .bloco table:has(td.Arial-11-Negrito) > tbody > tr > td.Arial-11-Negrito,
  .bloco table:has(td.Arial-11-Negrito) > tbody > tr > td[bgcolor="#EFEFEF"],
  table.tabela-cargos-milagres > tbody > tr > td.Arial-11-Negrito,
  table.tabela-cargos-milagres > tbody > tr > td[bgcolor="#EFEFEF"] {
    background: #efefef !important;
    font-weight: 700;
    font-size: 10.5px !important;
    text-align: center !important;
    white-space: nowrap !important;
    color: #2b2b2b;
  }
  /* Coluna "Cargo/Classe" (col 2) — texto longo */
  .bloco table:has(td.Arial-11-Negrito) > tbody > tr > td:nth-child(2),
  table.tabela-cargos-milagres > tbody > tr > td:nth-child(2) {
    min-width: 180px;
    max-width: 240px;
    text-align: left !important;
    font-weight: 600;
  }
  /* Coluna "Pré-requisitos" (col 3) — texto bem longo */
  .bloco table:has(td.Arial-11-Negrito) > tbody > tr > td:nth-child(3),
  table.tabela-cargos-milagres > tbody > tr > td:nth-child(3) {
    min-width: 220px;
    max-width: 320px;
    text-align: left !important;
    font-size: 10.5px !important;
  }
  /* Colunas numéricas (4 a 11 — Vagas/Salário/CH/Taxa) */
  .bloco table:has(td.Arial-11-Negrito) > tbody > tr > td:nth-child(n+4):nth-child(-n+11),
  table.tabela-cargos-milagres > tbody > tr > td:nth-child(n+4):nth-child(-n+11) {
    text-align: center !important;
    white-space: nowrap !important;
  }

  /* Recaptcha (se sobrar algum) */
  .g-recaptcha { transform: scale(0.85); transform-origin: 0 0; }

  /* Rodapé tabela - empilhar */
  #rodapeCentro table, #rodapeCentro tr, #rodapeCentro td {
    display: block !important;
    width: 100% !important;
    text-align: center;
  }
  #rodapeCentro img { margin: 5px auto; display: block; }

  /* Ícone PDF - reduzir */
  img[src*="pdf.png"] { width: 20px !important; height: auto; }

  /* Texto dos editais */
  a[href*=".pdf"] { display: inline-block; word-break: break-word; }
}

/* ---------- Mobile pequeno (≤ 420px) ---------- */
@media screen and (max-width: 420px) {

  body { font-size: 12px; }

  #menuCentro ul li a {
    font-size: 12px !important;
    padding: 3px 4px !important;
  }

  h1 { font-size: 18px; }
  h2 { font-size: 16px; }
  h3, h3.tit { font-size: 14px; }

  .TabbedPanelsTab {
    font-size: 11px !important;
    padding: 6px 4px !important;
  }

  /* Inputs ligeiramente mais compactos */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  select {
    font-size: 13px;
    padding: 6px 8px !important;
  }

  /* Thumbnails em listagens */
  .bloco table td div[style*="width:64px"] {
    width: 70px !important;
    height: 54px !important;
  }
}