/* ================= CONTROLE FINAL MOBILE (ANTI-QUEBRA) ================= */
@media (max-width: 768px) {

  /* 🔒 Regra absoluta: menu esquerdo NUNCA aparece no mobile */
  .op-list:not(.op-list-right) {
    display: none !important;
    visibility: hidden !important;
  }

  /* 🔒 Garante que só os botões permitidos existam */
  .op-list-right {
    display: flex !important;
    visibility: visible !important;
  }

  /* 🔒 Botão hamburguer sempre visível */
  .iconMenu {
    display: block !important;
    visibility: visible !important;
  }

  /* 🔒 Evita reflow quebrar header */
  .nav-header {
    flex-wrap: nowrap !important;
  }
}

@media (min-width: 1024px) {

    .main {
        display: flex;
        position: relative;
    }

    /* SIDEBAR */
    .sidebar {
        width: 280px;
        min-width: 280px;
        transition: width 0.35s ease;
        background: #f9f9f9;
        border-right: 1px solid #e0e0e0;
    }

    .sidebar.retraida {
        width: 0;
        min-width: 0;
        padding: 0;
        border: none;
    }

    .sidebar.retraida * {
        opacity: 0;
        pointer-events: none;
    }

    /* ABA DO ÍNDICE */
    .indice-tab {
        position: absolute;
        top: 50%;
        left: 280px;
        transform: translateY(-50%);
        background: #009846;
        color: #fff;
        border: none;
        border-radius: 0 6px 6px 0;
        padding: 10px 6px;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 6px;
        box-shadow: 0 3px 8px rgba(0,0,0,.2);
        z-index: 30;
        transition: left .35s ease, background .2s;
    }

    .indice-tab .icone {
        font-size: 15px;
    }

    /* TEXTO VERTICAL – SÓ NO HOVER */
    .indice-tab .texto {
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        font-size: 11px;
        letter-spacing: 1px;
        opacity: 0;
        max-height: 0;
        transition: opacity .2s ease;
    }

    .indice-tab:hover .texto {
        opacity: 1;
    }

    /* ESTADO RECOLHIDO */
    .sidebar.retraida + .indice-tab {
        left: 0;
        background: #516872;
    }

    .sidebar.retraida + .indice-tab .icone {
        transform: rotate(180deg);
    }
}

/* MOBILE – NADA MUDA */
@media (max-width: 1023px) {
    .indice-tab {
        display: none !important;
    }
}
@media (max-width: 768px) {
  .centered {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* rolagem suave no iOS */
  }
}
@media (max-width: 1024px) {

  .tech-tab-subtitle {
    display: none;
  }

}

@media (max-width: 768px) {
  [id] {
    scroll-margin-top: 90px;
  }

  /* ===== HEADER ===== */
  .iconMenu {
    display: block;
  }

  
  /* Esconde texto dos botões (corrige sobreposição) */
  .nav-header .texto-botao {
    display: none;
  }
  .op-list:not(.op-list-right) {
    display: none !important;
  }

  .nav-header .icone {
    font-size: 22px;
  }

  .nav-option {
    min-width: 40px;
    padding: 4px;
  }

  .logo img {
    max-width: 140px;
  }

  /* ===== LAYOUT ===== */
  .main {
    flex-direction: column;
    margin-top: 90px;
    height: auto;
    overflow: visible;
  }
  /* ===== SIDEBAR OFF-CANVAS ===== */
  .sidebar {
    position: fixed;
    top: 90px;
    left: -100%;
    width: 80%;
    max-width: 300px;
    
    background: #fff;
    z-index: 2000;
    transition: left 0.3s ease;
    border-right: none;
    box-shadow: 4px 0 10px rgba(0,0,0,0.15);
  }

  .sidebar.active {
    left: 0;
  }

  /* ===== CONTEÚDO ===== */
  .content {
    padding: 16px;
    height: auto;
    
  }


  /* ===== TABELAS ===== */
  table,
  .tabela,
  .tabela-arvore {
    width: 100% !important;
    font-size: 12px;
  }

  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  /* ===== TIPOGRAFIA ===== */
  body {
    font-size: 14px;
  }

  h2.subtitulo { font-size: 18px; }
  h3.subtitle-h3 { font-size: 16px; }
  h4 { font-size: 15px; }
  h5 { font-size: 14px; }
}
@media (max-width: 768px) {
  body {
    overflow-y: auto;
    overflow-x: hidden;
  }

  .content {
    overflow: visible;
    height: auto;
  }
}

@media (max-width: 768px) {

  /* ===== ESTADO FIXO DO HEADER NO MOBILE ===== */
  .op-list:not(.op-list-right) {
    display: none !important;
  }

  .op-list-right {
    display: flex !important;
  }

  .iconMenu {
    display: block !important;
  }

  .header,
  .nav-header {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }
}

/* ================= DROPDOWN COMPACTO NO MOBILE ================= */
@media (max-width: 768px) {
  .modelos-dropdown {
    position: absolute;     /* mantém referência correta */
    left: 100%;
    transform: translateX(10%);

    min-width: 100px;       /* mais estreito */
    max-width: 90vw;        /* não estoura a tela */
  }
/* ====== FORÇAR 100% DA LARGURA NO MOBILE ====== */
html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .main,
  .content,
  #manual-wrapper,
  #manual-content {
    width: 100%;
    max-width: 100%;
  }

  /* remove margens laterais que "encolhem" no mobile */
  section {
    margin-left: 0;
    margin-right: 0;
    padding-left: 4px;
    padding-right: 4px;
  }

  /* caixas que tinham limite de largura */
  .alerta,
  .informacao,
  .observacao,
  .observacao-box {
    max-width: 100%;
  }
.manual-header {
    padding: 6px 0;
  }

 

  .manual-header hr {
    height: 2px;
    margin: 6px 0;
  }

  .titulo-manual {
    font-size: 16px;
    margin-top: 4px;
  }
.manual-header {
    padding: 6px 0;
  }

  .manual-header img {
    width: 180px;
    max-width: 90%;
    height: auto;
  }

  .manual-header hr {
    height: 2px;
    margin: 6px 0;
  }

  .titulo-manual {
    font-size: 16px;
    margin-top: 4px;
  }
  /* 3️⃣ Evita @media aninhado (CSS inválido) */
.main {
    width: 100vw;
  }
/* 4️⃣ Garante que sidebar mobile não fique invisível */
  .sidebar {
    left: -100%;
  }

  .sidebar.active {
    left: 0;
  }
}
/* 4️⃣ animaçao do logo */
@media (prefers-reduced-motion: reduce) {
  .manual-header img,
  #manual-content {
    animation: none;
    opacity: 1;
    transform: none;
  }
}