/* ============================
   DESIGN RESPONSIVO
   ============================ */

/* === TABLETS E SMARTPHONES === */
@media (max-width: 767px) {
  /* Tipografia ajustada */
  .titulo {
    font-size: 2.2rem;
  }

  .frase {
    font-size: 1.2rem;
  }

  .temporizador {
    font-size: 3rem;
    margin-bottom: var(--espacamento-grande);
  }

  /* Indicador de progresso responsivo */
  .indicador-progresso {
    width: 140px;
    height: 140px;
  }

  .container-temporizador {
    padding: 12px;
  }

  .menu-cartao {
    flex-direction: column;
    align-items: center;
    gap: var(--espacamento-pequeno);
  }

  .botao {
    font-size: 1rem;
    padding: var(--espacamento-medio) var(--espacamento-grande);
    width: 200px;
  }

  .botoes-controle {
    flex-direction: column;
    align-items: center;
    gap: var(--espacamento-medio);
    max-width: 250px;
  }

  .botao-principal,
  .botao-reiniciar {
    width: 100%;
    margin-bottom: 0;
  }

  .controles {
    margin-bottom: var(--espacamento-grande);
  }

  /* Modal responsivo */
  .modal-conteudo {
    width: 95%;
    margin: var(--espacamento-pequeno);
    padding: var(--espacamento-grande);
  }

  /* Botão de estatísticas responsivo */
  .botao-estatisticas {
    top: var(--espacamento-medio);
    right: var(--espacamento-medio);
    width: 35px;
    height: 35px;
    font-size: 1rem;
  }

  /* Ícone de ajuda responsivo */
  .info-icon {
    top: var(--espacamento-medio);
    right: var(--espacamento-medio);
    width: 28px;
    height: 28px;
    font-size: 0.9rem;
  }
}

/* === SMARTPHONES PEQUENOS === */
@media (max-width: 480px) {
  .aplicativo {
    padding: var(--espacamento-pequeno);
  }

  .titulo {
    font-size: 2rem;
  }

  .temporizador {
    font-size: 2.6rem;
  }

  /* Indicador de progresso ainda menor */
  .indicador-progresso {
    width: 120px;
    height: 120px;
  }

  .container-temporizador {
    padding: 8px;
  }

  .secao-temporizador {
    padding: var(--espacamento-grande);
  }

  .info-icon {
    top: var(--espacamento-pequeno);
    right: var(--espacamento-pequeno);
    width: 26px;
    height: 26px;
    font-size: 0.8rem;
  }

  .botao {
    width: 180px;
  }

  .botoes-controle {
    max-width: 200px;
  }

  /* Botão de estatísticas ainda menor */
  .botao-estatisticas {
    top: var(--espacamento-pequeno);
    right: var(--espacamento-pequeno);
    width: 32px;
    height: 32px;
    font-size: 0.9rem;
  }
}

/* === TELAS GRANDES === */
@media (min-width: 1200px) {
  .aplicativo {
    max-width: 600px;
  }

  .titulo {
    font-size: 3.2rem;
  }

  .temporizador {
    font-size: 4.5rem;
  }

  /* Indicador de progresso maior para telas grandes */
  .indicador-progresso {
    width: 180px;
    height: 180px;
  }

  .container-temporizador {
    padding: 20px;
  }

  .secao-temporizador {
    padding: var(--espacamento-extra) 50px;
  }

  .botoes-controle {
    max-width: 400px;
  }
}