/* ============================================================================
   OutRun 2 SP — Internet Ranking
   responsive.css  —  camada de responsividade (mobile)
   --------------------------------------------------------------------------
   - Nada aqui afeta o desktop: todo o layout mobile vive dentro do @media.
   - O visual original (cores, fontes, imagens) é preservado; só o
     ARRANJO muda em telas estreitas.
   ============================================================================ */

#rk-menu-toggle { display: none; }   /* só aparece no mobile */
.rk-navmenu { display: none; }       /* menu de texto: só no mobile */
.rk-scroll {}                        /* transparente no desktop */

/* ----------------------------------------------------------------------------
   MOBILE  (<= 820px)
   ---------------------------------------------------------------------------- */
@media (max-width: 820px) {

  html, body { max-width: 100%; overflow-x: hidden; margin: 0; padding: 0; }
  img { max-width: 100%; height: auto; }

  /* ---- Empilha a tabela-base: banner em cima, conteúdo logo abaixo ----
     (a coluna lateral é tratada à parte, como painel sobreposto) */
  table[width="880"],
  table[width="880"] > tbody,
  table[width="880"] > tbody > tr,
  table[width="880"] > tbody > tr > td,
  table[width="880"] > tr,
  table[width="880"] > tr > td {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
    height: auto !important;
  }

  .rk-banner { text-align: center; padding: 4px 0; }
  .rk-banner img { width: 100%; max-width: 800px; }

  .rk-main {
    width: 100% !important;
    padding: 4px 6px 28px !important;
    box-sizing: border-box;
  }

  /* ---- Barra/Botão de menu (fixa no topo) ---- */
  #rk-menu-toggle {
    display: block;
    position: sticky;
    top: 0;
    z-index: 1001;
    width: 100%;
    border: 0;
    margin: 0;
    padding: 13px 10px;
    background: #003366;
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0.05em;
    text-align: center;
    cursor: pointer;
  }
  #rk-menu-toggle:active { background: #00254d; }

  /* ---- Coluna lateral: ESCONDIDA por padrão.
     Os seletores abaixo são mais específicos que a regra de empilhamento
     acima, para que o display:none realmente vença. ---- */
  table[width="880"] > tbody > tr > td.rk-side,
  table[width="880"] > tr > td.rk-side,
  .rk-side {
    display: none !important;
  }

  /* ---- Menu aberto: painel sobreposto, rolável, sem empurrar o conteúdo ---- */
  body.rk-menu-open { overflow: hidden; }
  body.rk-menu-open table[width="880"] > tbody > tr > td.rk-side,
  body.rk-menu-open table[width="880"] > tr > td.rk-side,
  body.rk-menu-open .rk-side {
    display: block !important;
    position: fixed;
    top: 48px;            /* abaixo da barra MENU */
    left: 0; right: 0; bottom: 0;
    z-index: 1000;
    margin: 0;
    padding: 14px 10px 28px !important;
    background-color: #FFFFFF;                  /* mesma base branca do body */
    background-image: url(/images/bg03.jpg);    /* mesmo fundo da página ranking_top_lang_us_ver_0.html (outrun_os.css) */
    background-repeat: repeat-y;
    background-position: 0% 0%;
    border-top: 2px solid #003366;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* no celular, troca os botões-imagem antigos por um menu de texto limpo */
  .rk-side-clean > div { display: none !important; }   /* esconde os GIFs antigos */
  .rk-navmenu {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 440px;
    margin: 0 auto;
  }
  .rk-navitem {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 14px 16px;
    background: #eaf4ff;
    border: 1px solid #97C6E8;
    border-radius: 8px;
    color: #003399 !important;
    font-size: 16px;
    font-weight: bold;
    text-align: left;
    text-decoration: none !important;
  }
  .rk-navitem:active { background: #d6ebff; }
  .rk-navhead {
    background: #003366;
    color: #ffffff !important;
    text-align: center;
    letter-spacing: 0.05em;
    margin-top: 12px;
  }
  /* cabeçalhos de curso como imagem (but02_sta_cvt / but02_sta_or2) */
  .rk-navhead-img {
    background: transparent !important;
    border: 0 !important;
    padding: 10px 6px 4px !important;
    margin-top: 6px;
    text-align: center;
  }
  .rk-navhead-img img {
    width: 170px;
    max-width: 66%;
    height: auto;
    display: inline-block;
  }
  /* demais botões do menu como imagem real da página (ícones e modos) */
  .rk-navimg-btn {
    background: transparent !important;
    border: 0 !important;
    padding: 6px !important;
    text-align: center;
  }
  .rk-navimg-btn img {
    width: 200px;
    max-width: 78%;
    height: auto;
    display: inline-block;
  }

  /* ---- Tabelas de RANKING (dados): rolagem horizontal, colunas preservadas ---- */
  .rk-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 0 12px;
    border: 1px solid #97C6E8;
    border-radius: 4px;
  }
  .rk-scroll > table.rk-data { width: auto !important; margin: 0; }
  .rk-scroll .normal, .rk-scroll .normal02 { font-size: 13px !important; }

  /* tabelas de layout/centralização ficam fluidas (mas não as de dados) */
  .rk-main table:not(.rk-data) { max-width: 100% !important; }

  /* ---- FORMULÁRIOS (enviar senha / busca / inspecionar / deletar) ---- */
  .rk-form,
  .rk-form > tbody,
  .rk-form > tbody > tr,
  .rk-form > tbody > tr > td,
  .rk-form > tr,
  .rk-form > tr > td {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
    text-align: left !important;
  }
  .rk-form td { height: auto !important; padding: 6px 8px !important; }
  .rk-form input[type="text"],
  .rk-form input[type="password"],
  .rk-form select,
  .rk-form textarea {
    width: 100%;
    box-sizing: border-box;
    font-size: 16px;          /* >=16px evita zoom automático no iOS */
    padding: 9px 8px;
    margin: 2px 0;
  }
  .rk-form input[name^="password_"] {
    width: 22% !important;
    display: inline-block;
    text-align: center;
    margin: 2px 1%;
  }
  .rk-form input[name="key"],
  .rk-form input[name="id_number"] { width: 60%; max-width: 220px; }
  .rk-form input[type="submit"],
  .rk-form input[type="button"],
  .rk-form input[type="reset"],
  .rk-form button {
    font-size: 16px;
    padding: 11px 18px;
    margin: 8px 6px 0 0;
    min-height: 44px;
    cursor: pointer;
  }

  body { font-size: 14px; }
  .copyright { font-size: 11px; }
}

/* Telas bem estreitas: senha em 2 colunas */
@media (max-width: 380px) {
  .rk-form input[name^="password_"] { width: 44% !important; }
}