/* =====================================================
   MOBILE FIXES – SPA (CSS-ONLY)
   Compatível com React / Manus / Vite
   ===================================================== */

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

/* Box model seguro */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Mobile */
@media (max-width: 768px) {

  /* Root do app */
  #root {
    width: 100%;
    overflow-x: hidden;
  }

  /* Header / navegação renderizada */
  header,
  nav,
  [role="navigation"] {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Menu flex seguro */
  nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    flex-wrap: wrap;
  }

  /* Links do menu */
  nav a {
    font-size: 14px;
    white-space: nowrap;
    max-width: 100%;
  }

  /* Impede estouro */
  nav * {
    min-width: 0;
    max-width: 100%;
  }

  /* Conteúdo principal */
  main {
    padding: 0 16px;
    max-width: 100%;
  }

  /* Títulos */
  h1 {
    font-size: clamp(1.5rem, 7vw, 2rem) !important;
    line-height: 1.2;
    word-break: break-word;
    margin-bottom: 1rem;
  }

  h2 {
    font-size: clamp(1.2rem, 5vw, 1.5rem) !important;
    line-height: 1.3;
  }

  /* Textos */
  p, span, div, li {
    word-break: break-word;
    overflow-wrap: break-word;
  }
  
  /* Evitar zoom automático no iOS */
  input, select, textarea {
    font-size: 16px !important;
  }

  /* Imagens */
  img {
    max-width: 100%;
    height: auto;
    display: block;
  }

  /* Tabelas */
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Scroll suave no iOS */
    margin-bottom: 1rem;
  }
  
  /* Ajuste de containers para não espremer conteúdo */
  .container, .hero, section, main, .calculadora-container {
    padding-left: 10px !important;
    padding-right: 10px !important;
    width: 100% !important;
    max-width: 100vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
  
  /* Ajuste de cards para mobile */
  .card, .resultado-card, .painel-entrada, .painel-resultados {
    padding: 12px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 8px !important;
  }

  /* Ajuste específico para a calculadora de reforma */
  .calculadora-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    width: 100% !important;
  }

  .aliquotas-row, .detalhamento-duplo, .tabs {
    grid-template-columns: 1fr !important; /* Força uma coluna em telas pequenas */
    gap: 10px !important;
  }

  .form-control, .btn, .tab-button {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .valor-total {
    font-size: 1.8rem !important; /* Diminui o valor para não quebrar a linha */
  }

  .imposto-item {
    padding: 8px !important;
    font-size: 0.8rem !important;
  }

  .calculadora-header {
    padding: 20px 15px !important;
    border-radius: 10px !important;
  }

  .calculadora-header h1 {
    font-size: 1.5rem !important;
  }

  /* Garante que nada saia da tela */
  * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  label,
  .card label,
  .card span,
  .card p {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  .card,
  .card * {
    min-width: 0;
  }
}

/* Estilos para o Menu Hamburger */
@media (max-width: 768px) {
    .navbar {
        justify-content: space-between;
        align-items: center;
        flex-wrap: nowrap; /* Impede que o menu quebre a linha */
    }

    .mobile-menu-toggle {
        display: block;
        background: none;
        border: none;
        color: white;
        font-size: 1.5rem;
        cursor: pointer;
        z-index: 1001;
        padding: 0.5rem;
    }

    .nav-links {
        position: fixed;
        top: 0;
        right: -100%; /* Esconde o menu fora da tela */
        width: 80%;
        height: 100vh;
        height: 100dvh; /* Altura dinâmica para mobile */
        background-color: var(--primary-blue-dark); /* Cor de fundo do menu */
        flex-direction: column;
        justify-content: flex-start;
        padding-top: 5rem;
        transition: right 0.3s ease-in-out;
        z-index: 1000;
        box-shadow: -2px 0 5px rgba(0,0,0,0.2);
        overflow-y: auto; /* Permite scroll se o menu for longo */
    }

    .nav-links.active {
        right: 0; /* Mostra o menu */
    }

    .nav-links li {
        width: 100%;
        text-align: center;
        margin: 0;
        padding: 1rem 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .nav-links li:last-child {
        border-bottom: none;
    }

    .nav-links a {
        font-size: 1.1rem;
        display: block;
        padding: 0.5rem;
    }
}

/* Esconder o botão e mostrar o menu em desktop */
@media (min-width: 769px) {
    .mobile-menu-toggle {
        display: none;
    }

    .nav-links {
        display: flex !important; /* Força a exibição em desktop */
        position: static;
        width: auto;
        height: auto;
        background-color: transparent;
        flex-direction: row;
        padding-top: 0;
        box-shadow: none;
    }
}